webpack系列之plugin及簡單的使用
阿新 • • 發佈：2020-12-09
一.plugin有什麼用
plugin是webpack核心功能，通過plugin（外掛）webpack可以實現loader所不能完成的複雜功能，使用plugin豐富的自定義API，可以控制webpack編譯流程的每個環節，實現對webpack的自定義功能擴充套件。
歡迎訪問這裡檢視更多關於大資料平臺建設的原創文章 或 webpack系列文章：webpack系列之loader的基本使用。
舉例
我們實際專案中就使用了HtmlWebpackPlugin外掛，它幫助我們做了下面幾件事兒：
- 在工程打包成功後會自動生成一個
html模板檔案 - 同時所依賴的
CSS/JS也都會被自動引入到這個html模板檔案中 - 設定生成
hash新增在引入檔案地址的末尾，類似於我們常用的時間戳，來解決可能會遇到的快取問題。
專案打包後生成的模板檔案如下：
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>移山</title> <link rel=icon href=/static/assets/favicon.ico type=image/x-icon> <link href=/static/css/app.37f937e3e08602bbb89778796e294cf1.css rel=stylesheet> </head> <body> <div id=app> </div> <script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js></script> <script type=text/javascript src=/static/js/vendor.d903c30c8b95cb48653b.js></script> <script type=text/javascript src=/static/js/app.0c675ae0a3c300e0af57.js></script> </body> </html>
二.什麼是plugin
plugin是一個具有apply方法的js物件。apply方法會被webpack的compiler（編譯器）物件呼叫，並且compiler物件可在整個compilation（編譯）生命週期內訪問。
一個plugin看起來大概是這個樣子：
function CustomPlugin(options){
// options是配置檔案，你可以在這裡進行一些與options相關的工作
}
// 每個plugin都必須定義一個apply方法，webpack會自動呼叫這個方法
CustomPlugin.prototype.apply = function(compiler){
......
});
}
module.exports = CustomPlugin;
有興趣對自定義外掛感興趣，想了解的更多的，可以看這裡。
三.使用plugin
在webpack配置檔案（webpack.config.js）中，向plugins屬性傳入new例項即可。比如：
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
module: {
loaders: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader'
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin(), //訪問內建的外掛
new HtmlWebpackPlugin({template: './src/index.html'}) //訪問第三方外掛
]
};
注意
webpack中的外掛分為內建外掛和第三方外掛- 內建外掛不需要額外安裝依賴，如上面的例子中：UglifyJsPlugin外掛
- 如果是第三方外掛，如上面的例子中HtmlWebpackPlugin外掛，則使用之前需要進行安裝：
npm install html-webpack-plugin --save-dev
四.案例
在對plugin有了一個基本認識後，來做一個小案例：
“我想對所有的檔案打包後新增一個版權宣告”
目錄結構
webpackPluginDemo的目錄結構如下：
├── app ├── package-lock.json ├── package.json ├── src │ └── index.js └── webpack.config.js
1. 安裝webpack
在webpackPluginDemo根目錄下安裝webpack:
npm install --save-dev webpack
2.入口檔案index.js
document.write('webpack系列之plugin的基本使用！');
3.webpack配置檔案webpack.config.js
const webpack = require('webpack')
module.exports = {
entry: __dirname + "/src/index.js", //入口檔案
output: {
path: __dirname + "/app", //打包後的檔案存放的地方
filename: "bundle.js" //打包後輸出檔案的檔名
},
plugins: [
new webpack.BannerPlugin('版權所有，翻版必究')
],
}
注意：BannerPlugin為內建外掛，如果是其它的外接外掛，則需在使用前要先安裝。
4.執行打包命令
➜ webpackPluginDemo webpack
Hash: 16453f43abe665633286
Version: webpack 2.4.1
Time: 70ms
Asset Size Chunks Chunk Names
bundle.js 2.86 kB 0 [emitted] main
[0] ./src/index.js 210 bytes {0} [built]
5.檢視結果
打包成功，可以看到app目錄下面已經生成了bundle.js，開啟bundle.js會發現版權資訊已經加上了：
五.常用外掛
常用外掛
- BannerPlugin：對所有的檔案打包後新增一個版權宣告
- uglifyjs-webpack-plugin： 對JS進行壓縮混淆
- HtmlWebpackPlugin：可以根據模板自動生成html程式碼，並自動引用css和js檔案
- Hot Module Replacement：在每次修改程式碼儲存後，瀏覽器會自動重新整理，實時預覽修改後的效果
- copy-webpack-plugin：通過Webpack來拷貝檔案
- extract-text-webpack-plugin：將js檔案和css檔案分別單獨打包，不混在一個檔案中
- DefinePlugin編譯時配置全域性變數，這對開發模式和釋出模式的構建允許不同的變數時非常有用
- optimize-css-assets-webpack-plugin不同元件中重複的css可以快速去重
- 更多可點選這裡檢視。
六. 更多文章
歡迎訪問更多關於webpack系列的原創文章：
關注微信公眾號
歡迎大家關注我的微信公眾號閱讀更多原創文章：