一、是什么
Plugin（Plug-in）是一種計算機應(yīng)用程序，它和主應(yīng)用程序互相交互，以提供特定的功能
是一種遵循一定規(guī)范的應(yīng)用程序接口編寫出來的程序，只能運行在程序規(guī)定的系統(tǒng)下，因為其需要調(diào)用原純凈系統(tǒng)提供的函數(shù)庫或者數(shù)據(jù)
webpack中的plugin也是如此，plugin賦予其各種靈活的功能，例如打包優(yōu)化、資源管理、環(huán)境變量注入等，它們會運行在 webpack 的不同階段（鉤子 / 生命周期），貫穿了webpack整個編譯周期
目的在于解決loader 無法實現(xiàn)的其他事
配置方式
這里講述文件的配置方式，一般情況，通過配置文件導(dǎo)出對象中plugins屬性傳入new實例對象。如下所示：
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通過 npm 安裝
const webpack = require('webpack'); // 訪問內(nèi)置的插件
module.exports = {
...
plugins: [
new webpack.ProgressPlugin(),
new HtmlWebpackPlugin({ template: './src/index.html' }),
],
};
二、特性
其本質(zhì)是一個具有apply方法javascript對象
apply 方法會被 webpack compiler調(diào)用，并且在整個編譯生命周期都可以訪問 compiler對象
const pluginName = 'ConsoleLogOnBuildWebpackPlugin';
class ConsoleLogOnBuildWebpackPlugin {
apply(compiler) {
compiler.hooks.run.tap(pluginName, (compilation) => {
console.log('webpack 構(gòu)建過程開始！');
});
}
}
module.exports = ConsoleLogOnBuildWebpackPlugin;
compiler hook 的 tap方法的第一個參數(shù)，應(yīng)是駝峰式命名的插件名稱
關(guān)于整個編譯生命周期鉤子，有如下：
- entry-option ：初始化 option
- run
- compile： 真正開始的編譯，在創(chuàng)建 compilation 對象之前
- compilation ：生成好了 compilation 對象
- make 從 entry 開始遞歸分析依賴，準(zhǔn)備對每個模塊進行 build
- after-compile： 編譯 build 過程結(jié)束
- emit ：在將內(nèi)存中 assets 內(nèi)容寫到磁盤文件夾之前
- after-emit ：在將內(nèi)存中 assets 內(nèi)容寫到磁盤文件夾之后
- done： 完成所有的編譯過程
- failed： 編譯失敗的時候
三、常見的Plugin
常見的plugin有如圖所示：
下面介紹幾個常用的插件用法：
HtmlWebpackPlugin
在打包結(jié)束后，?動生成?個 html ?文件，并把打包生成的js 模塊引?到該 html 中
npm install --save-dev html-webpack-plugin
// webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
...
plugins: [
new HtmlWebpackPlugin({
title: "My App",
filename: "app.html",
template: "./src/html/index.html"
})
]
};
<!--./src/html/index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%=htmlWebpackPlugin.options.title%></title>
</head>
<body>
<h1>html-webpack-plugin</h1>
</body>
</html>
在 html 模板中，可以通過 <%=htmlWebpackPlugin.options.XXX%> 的方式獲取配置的值
更多的配置可以自尋查找
clean-webpack-plugin
刪除（清理）構(gòu)建目錄
npm install --save-dev clean-webpack-plugin
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
...
plugins: [
...,
new CleanWebpackPlugin(),
...
]
}
mini-css-extract-plugin
提取 CSS 到一個單獨的文件中
npm install --save-dev mini-css-extract-plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = { ..., module: { rules: [ { test: /\.s[ac]ss$/, use: [ { loader: MiniCssExtractPlugin.loader }, 'css-loader', 'sass-loader' ] } ] }, plugins: [ ..., new MiniCssExtractPlugin({ filename: '[name].css' }), ... ]}
DefinePlugin
允許在編譯時創(chuàng)建配置的全局對象，是一個webpack內(nèi)置的插件，不需要安裝
const { DefinePlugun } = require('webpack')module.exports = { ... plugins:[ new DefinePlugin({ BASE_URL:'"./"' }) ]}
這時候編譯template模塊的時候，就能通過下述形式獲取全局對象
<link rel="icon" href="<%= BASE_URL%>favicon.ico>"
copy-webpack-plugin
復(fù)制文件或目錄到執(zhí)行區(qū)域，如vue的打包過程中，如果我們將一些文件放到public的目錄下，那么這個目錄會被復(fù)制到dist文件夾中
npm install copy-webpack-plugin -D
new CopyWebpackPlugin({ parrerns:[ { from:"public", globOptions:{ ignore:[ '**/index.html' ] } } ]})
復(fù)制的規(guī)則在patterns屬性中設(shè)置：
from：設(shè)置從哪一個源中開始復(fù)制
to：復(fù)制到的位置，可以省略，會默認(rèn)復(fù)制到打包的目錄下
globOptions：設(shè)置一些額外的選項，其中可以編寫需要忽略的文件
