先把代码贴出来，以后慢慢加说明

参考资料：入门 Webpack，看这篇就够了 / webpack 搭建自动打开，刷新浏览器

一.功能代码
1.index.html

<!DOCTYPE html>

<html>

  <head>

    <title>bootstrap demo</title>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

  </head>

  <body>

    <script src="bundle.js"></script>

  </body>

</html>

2.style.css

p{color:red}

3.helper.js

import "./style.css";

export default function(){

    let p = document.createElement("p");

    p.textContent="hello world  "

    return p;

}

4.index.js

import text from "./helper.js";

document.body.appendChild(text());

二.package.json

{

  "name": "indie-grow",

  "version": "0.2.0",

  "description": "indie monitor and dashbord",

  "main": "index.js",

  "scripts": {

    "test": "test",

    "start": "webpack-dev-server --hot --inline",

    "hello": "echo npm says hello!!!!!!",

    "server": "webpack-dev-server --open"

  },

  "keywords": [

    "indie"

  ],

  "author": "schneider",

  "license": "ISC",

  "devDependencies": {

    "open-browser-webpack-plugin": "0.0.5",

    "webpack": "^4.27.1",

    "webpack-cli": "^3.1.2",

    "webpack-dev-server": "^3.1.10"

  },

  "dependencies": {

    "bootstrap": "^4.1.3",

    "jquery": "^3.3.1",

    "popper.js": "^1.14.3"

  }

}

三.webpack.config.js

var webpack = require('webpack');

var OpenBrowserPlugin = require('open-browser-webpack-plugin')

module.exports={

    devtool: 'eval-source-map',

    entry : __dirname + "/index.js",

    output : {

        path : __dirname,

        filename : "bundle.js"

    },

    devServer: {

        port:80,

        contentBase: ".",

        historyApiFallback: true,

        inline: true

      } ,

      plugins: [

        new OpenBrowserPlugin({ url: 'http://localhost:80' })

    ],

    module: {

        rules:[

            {

                test: /\.css$/,

                use: [

                    {

                        loader: "style-loader"

                    },

                    {

                        loader: "css-loader"

                    }

                ]

            }

        ]

    }

}

最小化webpack项目的更多相关文章

  1. C#窗口皮肤制作(二)：创建窗口库项目以及最小化、最大化、关闭button的实现

    非常高兴有朋友关注这篇博客,同一时候也十分抱歉让关注的朋友久等了,隔上一篇博客也有3个月没有更新,主要是因为3月份辞职,4月份初离职到期离开了北京高德,来到了上海张江.眼下新工作也处于熟悉其中,希望大 ...

  2. How Javascript works (Javascript工作原理) (十四) 解析，语法抽象树及最小化解析时间的 5 条小技巧

    个人总结:读完这篇文章需要15分钟,文章介绍了抽象语法树与js引擎解析这些语法树的过程,提到了懒解析——即转换为AST的过程中不直接进入函数体解析,当这个函数体需要执行的时候才进行相应转换.(因为有的 ...

  3. webpack 项目接入Vite的通用方案介绍(上)

    愿景 希望通过本文,能给读者提供一个存/增量项目接入Vite的点子,起抛砖引玉的作用,减少这方面能力的建设成本 在阐述过程中同时也会逐渐完善webpack-vite-serve这个工具 读者可直接fo ...

  4. 实现iOS图片等资源文件的热更新化(四): 一个最小化的补丁更新逻辑

    简介 以前写过一个补丁更新的文章,此处会做一个更精简的最小化实现,以便于集成.为了使逻辑具有通用性,将剥离对AFNetworking和ReativeCocoa的依赖.原来的文章,可以先看这里: htt ...

  5. WPF程序最小化到任务通知栏

    我们通常使用的桌面软件,都可以最小化到任务通知栏,并且可以从任务通知栏再打开当前软件,或者通过软件的快捷方式从任务通知栏呼出. 我们可以通过下面的方式把WPF程序最小化到任务栏.由于WPF并没有实现N ...

  6. 安装完最小化 RHEL/CentOS 7 后需要做的 30 件事情（二）转载自码农网

    7. 安装 PHP PHP 是用于 web 基础服务的服务器端脚本语言.它也经常被用作通用编程语言.在最小化安装的 CentOS 中安装 PHP: # yum install php 安装完 php ...

  7. outlook新邮件到达提醒设置以及outlook最小化到托盘设置

    有些邮件是需要马上处理的,因此希望能在收到邮件之后马上就知道,但是有不希望频繁的去检查有没有.outlook可以帮我们轻松做到新邮件到达提醒. 一 .设置outlook新邮件到达提醒:选项->电 ...

  8. .NET Core 最小化发布

    .NET Core 应用最小化独立部署发布,.NET Core 默认应用独立发布,大概占用50m左右的空间,不同的系统大小有所区别. .NET Core 的发布之前我也有所介绍,.NET Core 跨 ...

  9. Effective Java 第三版——17. 最小化可变性

    Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...

随机推荐

  1. leetcode每日刷题计划-简单篇day6

    突发奇想&胡思乱想的一天 银行家算法证明错了并挂在黑板上的可怜希希 Num 53 最大子序和 Maximum Subarray O(n)的算法实现了,分治法有空补 class Solution ...

  2. Win10 安装SqlServer2012 无法访问数据库

    win10系统,安装好vs2017,sqlserver2012, 在abp     执行 Update-Database 会出错 具体解决办法是SqlServer2012的1433端口没打开. 打开办 ...

  3. 系统设计与架构笔记:ETL工具开发和设计的建议

    最近项目组里想做一个ETL数据抽取工具,这是一个研发项目,但是感觉公司并不是特别重视,不重视不是代表它不重要,而是可能不会对这个项目要求太高,能满足我们公司的小需求就行,想从这个项目里衍生出更多的东西 ...

  4. SQL Select 语句小数位数影响计算的准确率的问题

    在财务数据计算中,特别是分摊过程中,0.0001% 和0.00012%看似极小的差异,但是会造成最后求和很大的差异,因此,我们在计算中需要尽可能多的保留占比的小数位数 可以在SELECT CONVER ...

  5. 一个jQuery对象绑定多个事件

    1.两个事件有两种不同的方法 jQuery("#id").click(func1(){}).mouseover(func2(){}) ; 2.两个事件调用同一种方法 jquery( ...

  6. Working with Excel Files in Python

    Working with Excel Files in Python from: http://www.python-excel.org/ This site contains pointers to ...

  7. List和符号分隔的字符串互相转换

    一.将逗号分隔的字符串转换成List: 1. 使用JDK的Arrays类: import java.util.Arrays; import java.util.List; public class T ...

  8. windows内核驱动内存管理之Lookaside使用

    Windows内存管理中使用了类似于容器的东西,叫做Lookaside对象,每次程序员申请内存都会从Lookaside里面申请,只有不足的时候,Lookaside才会向内存又一次申请内存空间,这样减少 ...

  9. python之字符串拼接：%和format

    使用百分号拼接字符串: 例如: msg='i am %s my hobby is...' %'abc' print(msg) 如果需要用2个%s呢?就使用括号例如: msg='I am %s my h ...

  10. JS 通过 navigator获取判断浏览器信息

    获取浏览器信息需要使用navigator.userAgent 对象 根据获取到的内容判断浏览器信息 亲身测试 navigator.userAgent IE 11  Mozilla/5.0 (Windo ...