1. 程式人生 > >Webpack 4.X 從入門到精通 - plugin(二)

Webpack 4.X 從入門到精通 - plugin(二)

-h 打包 不同 .com aca spa 編譯 option tput

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

第三步:在pluginsnew一個

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

資料下載

下一篇:Webpack 4.X 從入門到精通 - devServer(三)

Webpack 4.X 從入門到精通 - plugin(二)