Webpack 多html入口、devServer、热更新配置

一、clean-webpack-plugin：

在每次生成dist目录前，先删除本地的dist文件（每次自动删除太麻烦）

1、安装clean-webpack-plugin   npm/cnpm i clean-webpack-plugin --save -dev

2、在我们的webpack.config.js文件中引入

const  cleanWebpackPlugin=require('clean-webpack-plugin');

然后在plugs中进行配置

plugins:[

new CleanWebpackPlugin(['dist']), //传入数组,指定要删除的目录

]

二、HotModuleReplacementPlugin

启用[热替换模块(Hot Module Replacement)]，也被称为 HMR。

永远不要在生产环境(production)下启用 HMR

基本用法(Basic Usage)

启用 HMR 非常简单，在大多数情况下也不需要设置选项。

new webpack.HotModuleReplacementPlugin({  // Options...})

选项(Options)

包含如下选项：

• multiStep (boolean)：设置为true时，插件会分成两步构建文件。首先编译热加载 chunks，之后再编译剩余的通常的资源。
• fullBuildTimeout (number)：当 multiStep 启用时，表示两步构建之间的延时。
• requestTimeout (number)：下载 manifest 的延时（webpack 3.0.0 后的版本支持）。

这些选项属于实验性内容，因此以后可能会被弃用。就如同上文所说的那样，这些选项通常情况下都是没有必要设置的，仅仅是设置一下 new webpack.HotModuleReplacementPlugin() 在大部分情况下就足够了。

webpack.config.js

const path = require("path");  
const HtmlWebpackPlugin = require('html-webpack-plugin');  
const CleanWebpackPlugin = require('clean-webpack-plugin');  
const Webpack = require('webpack');//1热更新  
module.exports = {  
// entry:\['./src/index.js','./src/index2.js'\],  
entry:{  
index:'./src/index.js',  
index2:'./src/index2.js'  
},  
output:{  
path:path.resolve(__dirname,'dist'),  
filename:'\[name\].boundle.js'  
},  
  
        //devServer  
devServer:{  
//设置服务器访问的基本目录  
contentBase:path.resolve(__dirname,'dist'),  
//服务器ip地址，localhost  
host:'localhost',  
port:8090,  
open:true,//自动打开浏览器  
hot:true//2热更新  
},  
  
  
plugins:\[  
new Webpack.HotModuleReplacementPlugin(),//3热更新  
new CleanWebpackPlugin(\['dist'\]),//删除dist  
new HtmlWebpackPlugin({  
minify:{  
collapseWhitespace:true,//压缩空白  
removeAttributeQuotes:true//删除属性双引号  
},  
hash:true,//消除缓存，添加版本号  
template: './src/index.html',//模板地址  
title: ' Webpack4.x ',  
filename: 'index.html',//生成多个页面  
chunks:\['index'\]//多页面分别引入自己的js  
}),  
new HtmlWebpackPlugin({  
hash:true,  
template:'./src/index2.html',  
title: '第二个页面',  
filename:'index2.html',  
chunks:\['index2'\]  
})  
\]  
  
  

}