使用 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来最小化常见的捆绑包，并通过copy-webpack插件复制的源提供缩小。我想摆脱uglify并将其替换为terser，因为它们都用于缩小。这是否有可能？terser插件是否可以在optimization配置部分之外使用？或者我可以以某种方式告诉它也要最小化我手动复制的源吗？

- dhilt

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,
      },
    ]),
  }

- dhilt