Webpack 4.X 從入門到精通 - plugin（二）

時間 2019-11-08

標籤 webpack 4.x 入門精通 plugin 简体版

原文原文鏈接

經過上一篇文章，咱們明白了webpack的兩個配置參數入口與出口，webpack會找到入口文件的地址，進去後一頓蹂躪，再經過你給的輸出地址就把編譯後的文件給你了。這篇文章接着去豐富webpack.config.js的內容，說一個參數叫pluginsjavascript

plugins

plugins裏面放的是插件，在webpack裏有各式各樣的插件可以幫你完成任何構建的事情。只有你想不到的，沒有它作不到的。而且全世界的小夥伴們都在給webpack貢獻開源的插件，因此插件的種類是很是豐富的。html

插件能作什麼

插件的做用在於提升開發效率，可以解放雙手，讓咱們去作更多有意義的事情。一些很low的事就通通交給插件去完成。好比在上一篇文章裏講到當webpack編譯打包後，咱們須要新建一個index.thml，以及在頁面裏經過script標籤去引入生成的js文件，那這些傻瓜式的，浪費精力的事情就應該交給插件自動完成，這就是所謂的自動化。咱們只須要關注功能如何實現、去作一些有意義的事件便可。java

插件的難點不在於plugins參數如何去用，而在於插件自己如何去用。由於每一個插件的功能不同，所需的配置參數也不一樣。要用這個插件須要按它的要求來寫參數，因此沒有一套統一的規格，這就要求你們善於去看插件的API，經過webpack官網或者github都能找到插件說明。webpack

html-webpack-plugin

下面就以這個html-webpack-plugin插件爲例，給你們演示插件的用法。這個插件的做用是用來自動生成html頁面，既能夠生成單個頁面又能夠生成多個頁面，而且在生成前你能夠給它一堆的配置，它會按照你想要的生成方式去生成頁面。git

小試牛刀

第一步：安裝github

npm i html-webpack-plugin -D

第二步：在webpack.config.js裏引入模塊web

const HtmlWebpackPlugin=require('html-webpack-plugin');

第三步：在plugins裏new一個npm

plugins:[
    new HtmlWebpackPlugin()
]

此時webpack.config.js的內容以下：segmentfault

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的配置參數，加上這些參數後，頁面就會變得酸爽動人！
一、建立模板
在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>

二、修改配置文件
在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爲例打開源碼，應該是下面這個樣子
http://i2.51cto.com/images/bl...
關於html-webpack-plugin插件的其它配置參數請參考：https://github.com/jantimon/h...

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/c...

資料下載

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。