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