记webpack下进行普通模块化开发基础配置（自动打包生成html、多入口多页面）

写本记时（2018-06-25）的各版本

"webpack": "^4.6.0"  //可直接使用4x以上的开发模式，刷新很快

"webpack-dev-server": "^3.1.4"   //当天安装

"html-webpack-plugin": "^3.2.0", //当天安装

---

如果要使用es6,先看其它教程安装好babel，这里主要记录基于html-webpack-plugin的多页面配置

首先装好html-webpack-plugin

在webpack.config.js 配置2个入口文件，和滤镜中2个出口文件（即生成2个页面）

 entry : {
     index : __dirname + '/src/index.js',
     main : __dirname + '/src/main.js'
 },

 plugins:[
    new HtmlWebpackPlugin({
        template: __dirname + "/index.html",
        filename:'index.html',
        //引入打包后的js的script标签所在的位置,这里表示放在head标签中,默认放文件尾部
            inject:'head',
        //指定html中title标签，要先在html中配置变量
        title:'哈哈',
        //指定上面entry中的js入口块
        chunks:['index'],
        //上线时减小html代码的规格,压缩代码
            minify:true
    }),
    new HtmlWebpackPlugin({
        template: __dirname + "/main.html",
        filename:'main.html',
        title:'嘿嘿',
        chunks:['main']
      })
    ]

打包命令：webpack

---

关于webpack 4.x以上的开发模式（快速自动刷新）

在package.json里面script中加入一条：

 "dev": "webpack-dev-server  --mode  development",

然后运行cnpm run dev