Webpack Plugin

插件是 webpack 的支柱功能。Webpack 自身也是構(gòu)建于你在 webpack 配置中用到的 相同的插件系統(tǒng) 之上！

插件目的在于解決 loader 無法實(shí)現(xiàn)的其他事。Webpack 提供很多開箱即用的 插件。

剖析

webpack 插件是一個具有 ?apply? 方法的 JavaScript 對象。apply 方法會被 webpack compiler 調(diào)用，并且在 整個 編譯生命周期都可以訪問 compiler 對象。

ConsoleLogOnBuildWebpackPlugin.js

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)該是駝峰式命名的插件名稱。建議為此使用一個常量，以便它可以在所有 hook 中重復(fù)使用。

用法

由于插件可以攜帶參數(shù)/選項(xiàng)，你必須在 webpack 配置中，向 ?plugins? 屬性傳入一個 ?new? 實(shí)例。

取決于你的 webpack 用法，對應(yīng)有多種使用插件的方式。

配置方式

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 訪問內(nèi)置的插件
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? 用于自定義編譯過程中的進(jìn)度報告，?HtmlWebpackPlugin? 將生成一個 HTML 文件，并在其中使用 ?script? 引入一個名為 ?my-first-webpack.bundle.js? 的 JS 文件。

Node API 方式

在使用 Node API 時，還可以通過配置中的 ?plugins? 屬性傳入插件。

some-node-script.js

const webpack = require('webpack'); // 訪問 webpack 運(yùn)行時(runtime)
const configuration = require('./webpack.config.js');

let compiler = webpack(configuration);

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

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