vue.js - 如何修改vue-cli3预设的terser-webpack-plugin？

Question

现有一个基于vue-cli3和webpack4的vue2项目，我使用vue-cli-service inspect命令导出webpack配置后，minimizer部分如代码所示：

minimizer: [      {        options: {          test: /\.m?js(\?.*)?$/i,          chunkFilter: () => true,          warningsFilter: () => true,          extractComments: false,          sourceMap: false,          cache: true,          cacheKeys: defaultCacheKeys => defaultCacheKeys,          parallel: true,          include: undefined,          exclude: undefined,          minify: undefined,          terserOptions: {            compress: {              arrows: false,              collapse_vars: false,              comparisons: false,              computed_props: false,              hoist_funs: false,              hoist_props: false,              hoist_vars: false,              inline: false,              loops: false,              negate_iife: false,              properties: false,              reduce_funcs: false,              reduce_vars: false,              switches: false,              toplevel: false,              typeofs: false,              booleans: true,              if_return: true,              sequences: true,              unused: true,              conditionals: true,              dead_code: true,              evaluate: true            },            mangle: {              safari10: true            }          }        }      }    ]

可以看到，里面并没有new TerserPlugin()，但是里面确实又有terserOption，请问下大佬们这是不是vue-cli内置了terser插件，如果是内置插件的话为什么不会被inspect导出来呢，而且如果是这种没有new TerserPlugin()的情况，我该如何修改这个插件的配置或者删除这个插件以更换别的插件呢？

Answer 1

从你给出的代码中可以看出，Vue CLI 3 确实内置了 TerserWebpackPlugin，而且它被添加到 webpack 的配置中，这是默认行为，你无需手动创建 TerserPlugin 实例并将其添加到 webpack 配置中。

至于 terserOptions，这些是 TerserPlugin 的配置选项，你可以通过修改这些选项来改变 TerserPlugin 的行为。

如果你想修改这个插件的配置或者删除这个插件以更换别的插件，你可能需要创建一个新的插件，并且修改或覆盖内置的 TerserWebpackPlugin。但是，请注意，你不能直接从内部的 TerserWebpackPlugin 中删除或替换它，因为它是在 CLI 内部使用的。

你可以创建一个新的 webpack 插件，并使用 processModule 和 shouldTransform 方法来控制哪些模块应该通过 Terser 进行转换。例如：

const TerserPlugin = require('terser-webpack-plugin');class CustomTerserPlugin extends TerserPlugin {  shouldTransform(module, { isScript }) {    // 在这里添加你的自定义逻辑    // 例如，你可能想要排除某些模块    // return !module.name.includes('your-module-name');  }}module.exports = {  configure: (webpackConfig, { env, paths }) => {    return Object.assign(webpackConfig, {      optimization: Object.assign(webpackConfig.optimization, {        minimizer: [new CustomTerserPlugin],      }),    });  },};

然后，在你的 vue.config.js 文件中使用这个新的插件：

module.exports = {  configureWebpack: require('./custom-webpack'),};

请注意，这只是一个例子，你需要根据你的实际需求来修改这个插件的行为。