npm run build:prod 打包后,文件中的console.log 失效

在使用 npm run build:prod 命令进行项目打包时,如果发现代码中的 console.log 语句已经去除,可能是因为你的构建配置没有正确设置以去除开发环境中的调试语句。以下是一些常见的解决方案和步骤,帮助你确保在生产环境中移除或者展示 console.log

使用环境变量

在 Webpack 配置中,你可以通过定义环境变量来控制是否移除 console.log。例如,你可以在 Webpack 的配置文件中添加一个插件来根据环境变量决定是否移除 console 调用。

安装并使用 TerserPlugin

如果你使用的是 Webpack,可以安装并使用 TerserPlugin 来压缩和优化你的代码,同时配置它以删除 console 语句。

首先,确保安装了 terser-webpack-plugin:

npm install terser-webpack-plugin --save-dev

2.在你的 Webpack 配置文件中(通常是 webpack.prod.js),配置 TerserPlugin 来移除 console:

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {

// 其他配置...

optimization: {

minimize: true,

minimizer: [

new TerserPlugin({

terserOptions: {

compress: {

drop_console: true, // 移除console

},

},

}),

],

},

};

相关推荐
咩咩啃树皮8 小时前
第40篇:Vue3组件化开发精讲——组件拆分、复用、父子通信、工程化架构
java·前端·架构
阳光是sunny8 小时前
LangGraph中的Reducer是什么
前端·人工智能·后端
触底反弹8 小时前
一文搞懂 Tailwind CSS 弹性布局:从原理到实战
前端·css·html
阳光是sunny8 小时前
从链到图:LangGraph 入门基础全解析
前端·人工智能·后端
小林ixn9 小时前
从 ??= 到 onKeyDown:一个 React 组件的“自我修养”
前端·javascript·react.js
REDcker9 小时前
显示分辨率标准对照详解
前端·网络·分辨率·显示·屏幕
এ慕ོ冬℘゜9 小时前
前端实战:jQuery 多条件联合搜索(标题模糊查询 + 日历时间段筛选)
前端·javascript·jquery
武子康9 小时前
Search Console Platform Properties 扩大 SEO 资产边界:从 Page Ranking 到 Topic Coverage(5 类误读边界 + 3 表数据层设计)
前端·人工智能·后端
一点一木10 小时前
从60首歌到1个网站:输入你的故事,还你一首歌
前端·github
IT_陈寒11 小时前
Vue这个特性差点让我加班到凌晨,谁懂啊
前端·人工智能·后端