通過上一篇文章，我們明白了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