Webpack Plugin

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

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

剖析

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

ConsoleLogOnBuildWebpackPlugin.js

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

class ConsoleLogOnBuildWebpackPlugin {
  apply(compiler) {
    compiler.hooks.run.tap(pluginName, (compilation) => {
      console.log('webpack 構(gòu)建正在啟動(dòng)！');
    });
  }
}

module.exports = ConsoleLogOnBuildWebpackPlugin;

compiler hook 的 tap 方法的第一個(gè)參數(shù)，應(yīng)該是駝峰式命名的插件名稱。建議為此使用一個(gè)常量，以便它可以在所有 hook 中重復(fù)使用。

用法

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

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

配置方式

webpack.config.js

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

Node API 方式

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

some-node-script.js

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

let compiler = webpack(configuration);

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

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