通過上一篇文章，我們明白了webpack的兩個配置參數(shù)入口與出口，webpack會找到入口文件的地址，進去后一頓蹂躪，再通過你給的輸出地址就把編譯后的文件給你了。這篇文章接著去豐富webpack.config.js的內(nèi)容，說一個參數(shù)叫plugins

成都創(chuàng)新互聯(lián)公司從2013年開始，先為港北等服務(wù)建站，港北等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為港北企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

plugins

plugins里面放的是插件，在webpack里有各式各樣的插件能夠幫你完成任何構(gòu)建的事情。只有你想不到的，沒有它做不到的。并且全世界的小伙伴們都在給webpack貢獻開源的插件，所以插件的種類是非常豐富的。

插件能做什么

插件的作用在于提高開發(fā)效率，能夠解放雙手，讓我們?nèi)プ龈嘤幸饬x的事情。一些很low的事就統(tǒng)統(tǒng)交給插件去完成。比如在上一篇文章里講到當(dāng)webpack編譯打包后，我們需要新建一個index.thml，以及在頁面里通過script標(biāo)簽去引入生成的js文件，那這些傻瓜式的，浪費精力的事情就應(yīng)該交給插件自動完成，這就是所謂的自動化。我們只需要關(guān)注功能如何實現(xiàn)、去做一些有意義的事件即可。

插件的難點不在于plugins參數(shù)如何去用，而在于插件本身如何去用。因為每個插件的功能不一樣，所需的配置參數(shù)也不同。要用這個插件需要按它的要求來寫參數(shù)，所以沒有一套統(tǒng)一的規(guī)格，這就要求大家善于去看插件的API，通過webpack官網(wǎng)或者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的內(nèi)容如下：

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的內(nèi)容如下：

console.log('這是第一個入口文件');

2.js的內(nèi)容如下

console.log('這是第二個入口文件！');

第四步：在終端里執(zhí)行命令webpack，如果不出意外的話是下面這樣：

這個就代表已經(jīng)成功了，在項目目錄里會自動生成一個dist目錄，里面包含一個index.html及一個one.bundle.js和一個two.bundle.js。打開index.html的源碼，你能看到已經(jīng)自動添加了兩個script標(biāo)簽分別引入了兩個js文件。

鋒芒必露

接著要演示html-webpack-plugin的配置參數(shù)，加上這些參數(shù)后，頁面就會變得酸爽動人！
1、創(chuàng)建模板
在src目錄下創(chuàng)建一個template.html做為模板文件，代碼如下：

    
        
        
        
    
    
        
這是自帶的div
    

2、修改配置文件
在webpack.config.js里修改plugins如下：

plugins:[
    new HtmlWebpackPlugin({
        title:'陳學(xué)輝',    /*這個值對應(yīng)html里的title*/
        template:'./src/template.html', //模板文件地址
        filename:'test1.html',  //文件名，默認(rèn)為index.html（路徑相對于output.path的值）
        inject:true,    //script標(biāo)簽的位置，true/body為在標(biāo)簽前，head為在里，false表示頁面不引入js文件
        hash:true,  //是否為引入的js文件添加hash值
        chunks:['one'], //頁面里要引入的js文件，值對應(yīng)的是entry里的key。省略參數(shù)會把entry里所有文件都引入
        //excludeChunks:['one'],//頁面里不能引入的js文件，與chunks剛好相反
        minify:{    //html-webpack-plugin內(nèi)部集成了html-minifier
            collapseWhitespace:true,    //壓縮空格
            removeAttributeQuotes:true, //移除引號
            removeComments:true,        //移除注釋
        },
    }),
    //生成兩個文件，分別引入兩個js文件（現(xiàn)在是一個文件里引入了兩個js）
    new HtmlWebpackPlugin({
        title:'kaivon',
        template:'./src/template.html',
        hash:true,
        filename:'test2.html',
        chunks:['two']
    })
]

刪掉dist目錄，并在終端再次執(zhí)行webpack命令。此時會在項目的根目錄下生成一個dist文件，目錄如下：

此時以test1.html為例打開源碼，應(yīng)該是下面這個樣子

關(guān)于html-webpack-plugin插件的其它配置參數(shù)請參考：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目錄再創(chuàng)建新的dist目錄。里面的參數(shù)為要刪除的目錄，放在一個數(shù)組里面
    ...
]

在文件夾里打開dist所在的目錄，并在終端里再次執(zhí)行命令webpack后，會看到dist目錄先被刪除后又被創(chuàng)建。
關(guān)于clean-webpack-plugin插件的所有配置參數(shù)請參考：https://github.com/johnagan/clean-webpack-plugin

資料下載

下一篇：Webpack 4.X 從入門到精通 - devServer與mode（三）