webpack4.29.x成神之路（二十一） 編寫一個plugin

目錄

上節： 編寫一個loader

目錄：

插件會運行在webpack的各個生命週期，咱們設計一個插件時，必須肯定這個插件的執行時機。
webpack的生命週期不少，參考：https://webpack.js.org/api/co...

如今寫個簡單的插件，需求是在打包完成後，額外輸出一個叫copyRight.txt的文件
根目錄下新建plugins/copy-right.plugin.js:

module.exports = class CopyRightPlugin {
  constructor(params) {
    this.name = (params && params.name) || 'Madao';
  }
  apply(compiler) {
    /*
      compiler.hooks：webpack生命週期
    */

    const that = this;

    // 資源輸出到 output 目錄前執行, 是個異步鉤子
    compiler.hooks.emit.tapAsync('CopyRightPlugin', (compilation, cb) => {
      // compilation.assets  打包後的內容
      // debugger;
      compilation.assets['copyRight.txt'] = {
        source() {
          // 返回文件內容
          return 'copyright by ' + that.name
        },
        size() {
          // 文件大小
          return 30
        }
      }
      cb();
    });
  }
}

es6的類就很少說了，而後再配置中引用。
webpack/webpack.prod.js:

const CleanWebpackPlugin = require('clean-webpack-plugin');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyRightPlugin = require('../plugins/copy-right.plugin');

module.exports = merge(baseConfig, {
  mode: 'production',
  output: {
    filename: '[name].[contenthash:10].js'
  },
  devtool: 'cheap-module-source-map',
  module: {
    rules: [{
      test: /\.less$/,
      use: [{
        loader: MiniCssExtractPlugin.loader,
      }, 'css-loader', 'postcss-loader', 'less-loader']
    }]
  },
  plugins: [
    new CopyRightPlugin(),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    }),
    new CleanWebpackPlugin()
  ],
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
});

而後npm run build, 查看輸出目錄：

下節：手動配置vue-cli上