外掛程式

外掛是 webpack 的 主幹。Webpack 本身建構於相同的外掛系統，您可以在 webpack 設定中使用它！

它們也用於執行其他任何 載入器 無法執行的動作。Webpack 提供許多此類外掛，而且開箱即用。

結構

Webpack 外掛是一個 JavaScript 物件，它有一個 apply 方法。此 apply 方法是由 webpack 編譯器呼叫，提供存取整個編譯生命週期的權限。

ConsoleLogOnBuildWebpackPlugin.js

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

class ConsoleLogOnBuildWebpackPlugin {
  apply(compiler) {
    compiler.hooks.run.tap(pluginName, (compilation) => {
      console.log('The webpack build process is starting!');
    });
  }
}

module.exports = ConsoleLogOnBuildWebpackPlugin;

建議編譯器掛鉤的 tap 方法的第一個參數應為外掛名稱的焦糖化版本。建議使用常數，以便在所有掛鉤中重複使用。

用法

由於外掛可以採用引數/選項，因此您必須將new實例傳遞給 webpack 組態中的plugins屬性。

根據您使用 webpack 的方式，有多種方法可以使用外掛。

組態

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); //to access built-in plugins
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 會使用 script 標籤產生包含 my-first-webpack.bundle.js 檔案的 HTML 檔案。

節點 API

使用節點 API 時，您也可以透過組態中的plugins屬性傳遞外掛。

some-node-script.js

const webpack = require('webpack'); //to access webpack runtime
const configuration = require('./webpack.config.js');

let compiler = webpack(configuration);

new webpack.ProgressPlugin().apply(compiler);

compiler.run(function (err, stats) {
  // ...
});