webpack - 通过插件复制源时使用 terser webpack 插件而不是 uglify

Question

我的 webpack.config.js 中有以下包:

const CopyWebpackPlugin = require("copy-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const UglifyJS = require("uglify-es");

这是我使用这些包的配置的一部分:

  optimization: {
    minimizer: [new TerserPlugin()],
  },
  plugins: {
    new CopyWebpackPlugin([
      {
        from: "./node_modules/whatwg-fetch/dist/fetch.umd.js",
        to: "./js/polyfills/whatwg-fetch.js",
        transform: content => UglifyJS.minify(content.toString()).code,
      },
    ]),
  }

因此，我使用 terser 最小化了我的公共(public)包，并通过 uglify 为被 copy-webpack 插件复制的源提供了最小化。我想摆脱 uglify 并将其替换为 terser 因为它们都被用于缩小。可能吗？ terser 插件可以在 optimization 配置部分之外使用吗？或者也许我可以通过某种方式告诉他也将我手动复制的资源最小化？

Answer 1

事实证明，解决方案很简单。由于 terser-webpack-plugin 包含 terser，它可以独立使用。

const CopyWebpackPlugin = require("copy-webpack-plugin");
const Terser = require("terser");

并且无需将 terser 添加到依赖列表!然后我们可以在任何时候显式地使用它:

  plugins: {
    new CopyWebpackPlugin([
      {
        from: "./node_modules/whatwg-fetch/dist/fetch.umd.js",
        to: "./js/polyfills/whatwg-fetch.js",
        transform: content => Terser.minify(content.toString()).code,
      },
    ]),
  }