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

1、clean-webpack-plugin：

在每次生成dist目錄前，先刪除本地的dist文件（每次自動刪除太麻煩）

一、安裝clean-webpack-plugin   npm/cnpm i clean-webpack-plugin --save -dev

二、在咱們的webpack.config.js文件中引入

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

    而後在plugs中進行配置

        plugins:[

            new CleanWebpackPlugin(['dist']), //傳入數組,指定要刪除的目錄

        ]

2、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'\]  
})  
\]  
  
  

}