## 前言 **plugin**是 webpack 的[支柱](https://github.com/webpack/tapable)功能。webpack 自身也是構建于你在 webpack 配置中用到的**相同的插件系統**之上！ 插件目的在于解決[loader](https://webpack.docschina.org/concepts/loaders)無法實現的**其他事**。 ### 用法 ***** 由于**插件**可以攜帶參數/選項，你必須在 webpack 配置中，向`plugins`屬性傳入一個`new`實例。 取決于你的 webpack 用法，對應有多種使用插件的方式。 ### 剖析 ***** webpack**插件**是一個具有[`apply`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply)方法的 JavaScript 對象。`apply`方法會被 webpack compiler 調用，并且在**整個**編譯生命周期都可以訪問 compiler 對象。 **ConsoleLogOnBuildWebpackPlugin.js** ~~~javascript const pluginName = 'ConsoleLogOnBuildWebpackPlugin'; class ConsoleLogOnBuildWebpackPlugin { apply(compiler) { compiler.hooks.run.tap(pluginName, (compilation) => { console.log('webpack 構建過程開始！'); }); } } module.exports = ConsoleLogOnBuildWebpackPlugin; ~~~ compiler hook 的 tap 方法的第一個參數，應該是駝峰式命名的插件名稱。建議為此使用一個常量，以便它可以在所有 hook 中重復使用。 ### 配置方式 ***** **webpack.config.js** ~~~javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通過 npm 安裝 const webpack = require('webpack'); // 訪問內置的插件 const path = require('path'); module.exports = { entry: './path/to/my/entry/file.js', output: { filename: 'my-first-webpack.bundle.js', path: path.resolve(__dirname, 'dist'), }, module: { rules: [ { test: /\.(js|jsx)$/, use: 'babel-loader', }, ], }, plugins: [ new webpack.ProgressPlugin(), new HtmlWebpackPlugin({ template: './src/index.html' }), ], }; ~~~ `ProgressPlugin`用于自定義編譯過程中的進度報告，`HtmlWebpackPlugin`將生成一個 HTML 文件，并在其中使用`script`引入一個名為`my-first-webpack.bundle.js`的 JS 文件。 ### 其他 ***** 參考鏈接：https://webpack.docschina.org/concepts/plugins/