Webpack 4.X webpack.config.js 檔案配置（一）
通過上一篇文章，我們明白了webpack的兩個配置引數入口與出口，webpack會找到入口檔案的地址，進去後一頓蹂躪，再通過你給的輸出地址就把編譯後的檔案給你了。這篇文章接著去豐富webpack.config.js的內容，說一個引數叫plugins
plugins
plugins裡面放的是外掛，在webpack裡有各式各樣的外掛能夠幫你完成任何構建的事情。只有你想不到的，沒有它做不到的。並且全世界的小夥伴們都在給webpack貢獻開源的外掛，所以外掛的種類是非常豐富的。
外掛能做什麼
外掛的作用在於提高開發效率，能夠解放雙手，讓我們去做更多有意義的事情。一些很low的事就統統交給外掛去完成。比如在webpack編譯打包後，我們需要新建一個index.thml，以及在頁面裡通過script標籤去引入生成的js檔案，那這些傻瓜式的，浪費精力的事情就應該交給外掛自動完成，這就是所謂的自動化。我們只需要關注功能如何實現、去做一些有意義的事件即可。
外掛的難點不在於plugins引數如何去用，而在於外掛本身如何去用。因為每個外掛的功能不一樣，所需的配置引數也不同。要用這個外掛需要按它的要求來寫引數，所以沒有一套統一的規格，這就要求大家善於去看外掛的API，通過webpack官網或者github都能找到外掛說明。
html-webpack-plugin
下面就以這個html-webpack-plugin
html頁面，既可以生成單個頁面又可以生成多個頁面，並且在生成前你可以給它一堆的配置，它會按照你想要的生成方式去生成頁面。
小試牛刀
第一步：安裝
npm i html-webpack-plugin -D第二步：在webpack.config.js裡引入模組
const HtmlWebpackPlugin=require('html-webpack-plugin');第三步：在plugins裡new一個
plugins:[
new HtmlWebpackPlugin()
]此時webpack.config.js
const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin'); module.exports={ entry:{ one:'./src/1.js', two:'./src/2.js' }, output:{ path:path.resolve(__dirname,'dist'), filename:'[name].bundle.js' }, plugins:[ new HtmlWebpackPlugin() ] } 1.js的內容如下：
console.log('這是第一個入口檔案');2.js的內容如下
console.log('這是第二個入口檔案！');第四步：在終端裡執行命令webpack，如果不出意外的話是下面這樣：
這個就代表已經成功了，在專案目錄裡會自動生成一個dist目錄，裡面包含一個index.html及一個one.bundle.js和一個two.bundle.js。開啟index.html的原始碼，你能看到已經自動添加了兩個script標籤分別引入了兩個js檔案。
鋒芒必露
接著要演示html-webpack-plugin的配置引數，加上這些引數後，頁面就會變得酸爽動人！
1、建立模板
在src目錄下建立一個template.html做為模板檔案，程式碼如下：
<!DOCTYPE html>
<html>
<head> <meta charset="UTF-8"> <!--這是個模板檔案，title裡的語法是為了能解析配置引數裡title對應的值--> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <div id="box">這是自帶的div</div> </body> </html>2、修改配置檔案
在webpack.config.js裡修改plugins如下：
plugins:[
new HtmlWebpackPlugin({
title:'陳學輝', /*這個值對應html裡的title*/
template:'./src/template.html', //模板檔案地址 filename:'test1.html', //檔名，預設為index.html（路徑相對於output.path的值） inject:true, //script標籤的位置，true/body為在</body>標籤前，head為在<head>裡，false表示頁面不引入js檔案 hash:true, //是否為引入的js檔案新增hash值 chunks:['one'], //頁面裡要引入的js檔案，值對應的是entry裡的key。省略引數會把entry裡所有檔案都引入 //excludeChunks:['one'],//頁面裡不能引入的js檔案，與chunks剛好相反 minify:{ //html-webpack-plugin內部集成了html-minifier collapseWhitespace:true, //壓縮空格 removeAttributeQuotes:true, //移除引號 removeComments:true, //移除註釋 }, }), //生成兩個檔案，分別引入兩個js檔案（現在是一個檔案裡引入了兩個js） new HtmlWebpackPlugin({ title:'kaivon', template:'./src/template.html', hash:true, filename:'test2.html', chunks:['two'] }) ]刪掉dist目錄，並在終端再次執行webpack命令。此時會在專案的根目錄下生成一個dist檔案，目錄如下：
此時以test1.html為例開啟原始碼，應該是下面這個樣子
關於html-webpack-plugin外掛的其它配置引數請參考：https://github.com/jantimon/html-webpack-plugin
clean-webpack-plugin
在用HtmlWebpackPlugin的時候時需要把dist目錄刪掉再去看生成的檔案，這個也屬於傻瓜式的操作，clean-webpack-plugin這個外掛就可以做這件事情
第一步：安裝
npm i clean-webpack-plugin -D第二步：在webpack.config.js裡引入模組
const CleanWebpackPlugin=require('clean-webpack-plugin');第三步：在plugins的 最上面 new一個
plugins:[
new CleanWebpackPlugin(['./dist']), //這個一定要放在最上面，作用是先刪除dist目錄再建立新的dist目錄。裡面的引數為要刪除的目錄，放在一個數組裡面
...
]在資料夾裡開啟dist所在的目錄，並在終端裡再次執行命令webpack後，會看到dist目錄先被刪除後又被建立。
關於clean-webpack-plugin外掛的所有配置引數請參考：https://github.com/johnagan/clean-webpack-plugin
原文地址：http://blog.51cto.com/13258913/2153286