plugins

最简单了解的方法就是写一个

// plugins/analyze-webpack-plugin.js
class AnalyzeWebpackPlugin {
  apply(compiler) {
    // emit是异步串行钩子
    compiler.hooks.emit.tap("AnalyzeWebpackPlugin", (compilation) => {
      // Object.entries将对象变成二维数组。二维数组中第一项值是key，第二项值是value
      const assets = Object.entries(compilation.assets);

      let source = "# 分析打包资源大小 \n| 名称 | 大小 |\n| --- | --- |";

      assets.forEach(([filename, file]) => {
        source += `\n| ${filename} | ${file.size()} |`;
      });

      // 添加资源
      compilation.assets["analyze.md"] = {
        source() {
          return source;
        },
        size() {
          return source.length;
        },
      };
    });
  }
}

module.exports = AnalyzeWebpackPlugin;

另外的写法可以是定义一个函数，然后改动函数的prototype，如下

function ChangeAppJSonPlugin() {}

ChangeAppJSonPlugin.prototype.apply = function (compiler) {
  compiler.hooks.emit.tap(('ChangeAppJSonPlugin', function (compilation, callback) {
    // 在生成文件中，创建一个头部字符串：
    var filelist = '';

    // 遍历所有编译过的资源文件，
    // 对于每个文件名称，都添加一行内容。
    for (var filename in compilation.assets) {
      if (filename === 'app.json') {
        // 获取app.json 内容
        try {
          const source = JSON.parse(compilation.assets[filename].source());
          const outPushPage = source['outPushPage'];
          const newPage = deepClone(outPushPage, source);
          delete newPage.outPushPage;
          filelist = JSON.stringify(newPage);
        } catch (err) {
          console.log(err);
          callback();
        }
      }
    }

    // 将这个列表作为一个新的文件资源，插入到 webpack 构建中：
    compilation.assets['app.json'] = {
      source: function () {
        return filelist;
      },
      size: function () {
        return filelist.length;
      },
    };

    callback();
  });
};

module.exports = ChangeAppJSonPlugin;

怎么使用呢

const AnalyzeWebpackPlugin = require("./plugins/analyze-webpack-plugin");

//...省略
   plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'public/index.html')
        }),
        new AnalyzeWebpackPlugin()
    ],

在小程序中，如taro，具体看他们文档，这里只给个例子 方法一：

module.exports = {
  // ...
  mini: {
    // ...
    webpackChain(chain, webpack) {
      chain.merge({
        plugin: {
          install: {
            plugin: require('./AnalyzeWebpackPlugin'),
            args: [// 这里都是参数
              {
                // Use --save or --save-dev 
                dev: false,
                // Install missing peerDependencies
                peerDependencies: true,
                // Reduce amount of console logging
                quiet: false,
                // npm command used inside company
                npm: 'cnpm',
              },
            ],
          },
        },
      })
    },
  },
}

方法二：因为taro使用了webpackChain库，所以官网中没写，但是实际上有另外一个方式

// config/index.js
module.exports = {
  // ... 其他配置 ...
  webpackChain(chain, webpack) {
    chain.plugin('pluginName').use(YourWebpackPlugin, [options]);
  },
};

两种方法，一适合批量，二适合单个插件。