打包配置优化

去除console debugger配置

安装依赖:terser-webpack-plugin

这个报错是 terser-webpack-plugin版本与 Webpack 版本不兼容 导致的(Vue CLI 项目默认用 Webpack 4,但你安装的是适配 Webpack 5 的terser-webpack-plugin 5.x 版本)

步骤 1:卸载高版本的terser-webpack-plugin

先卸载当前不兼容的版本:

javascript 复制代码
npm uninstall terser-webpack-plugin

步骤 2:安装适配 Webpack 4 的版本

Vue CLI(Webpack 4)需要安装terser-webpack-plugin@4.x版本:

javascript 复制代码
npm install terser-webpack-plugin@4.2.3 --save-dev

步骤 3:修改vue.config.js的配置(适配 4.x 版本)

4.x 版本的配置和 5.x 略有不同,需要调整为:

javascript 复制代码
module.exports = {
  configureWebpack: {
    optimization: {
      minimizer: [
        new (require('terser-webpack-plugin'))({
          terserOptions: {
            compress: {
              drop_console: process.env.NODE_ENV === 'production',// 生产环境移除所有console
              drop_debugger: true,// 始终移除debugger
              pure_funcs: ['console.log', 'console.warn'] // 精准移除指定console方法
            },
            output: {
              comments: false // 注意:4.x版本的注释配置在output里
            }
          },
          extractComments: false // 不将注释提取到单独的文件中
        })
      ]
    }
  },
   // 可选:Vue CLI 特有的配置,进一步优化
  productionSourceMap: false, // 关闭生产环境sourceMap(减少打包体积,同时避免源码暴露)
};
相关推荐
全马必破三1 小时前
Webpack知识点汇总
前端·webpack·node.js
lcc1875 天前
Babel
webpack
光影少年6 天前
前端工程化
前端·webpack·taro
lcc1876 天前
Webpack 高级
webpack
lcc1877 天前
Eslint
webpack
lcc1877 天前
处理字体图标资源
webpack
lcc1877 天前
处理样式资源
webpack
lcc1877 天前
Webpack 基本介绍
webpack
pas1367 天前
01-vite 学习内容
前端·webpack
aPurpleBerry9 天前
webpack: overview, config ( plugin loader alias..
前端·webpack·node.js