问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
BugMakerr
    118
    新手上路，请多包涵

    现有一个基于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()的情况，我该如何修改这个插件的配置或者删除这个插件以更换别的插件呢？

    vue.jsvue-cliwebpack
    阅读 1.3k
    avatarAI BotBETA

    从你给出的代码中可以看出，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'),
};

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

    1 个回答
    得票最新
    头像
    luxigaola
      15916

      在build文件夹的webpack.prod.conf.js文件中修改

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题