webpack4与UglifyJs打包如何清除(删除)console,配置uglifyOptions参数
Author:zhoulujun Date:
不论是grunt还是gulp还是webpack,使用uglifJs压缩js,配置都一样的
在https://www.webpackjs.com/plugins/uglifyjs-webpack-plugin/#uglifyoptions,并么有找到移除console的配置选项。
const UglifyJsPlugin = require('uglifyjs-webpack-plugin') new UglifyJsPlugin({ //压缩选项 uglifyOptions: { compress: { warnings: false, drop_console: true, drop_debugger: true, pure_funcs: ['console.log'] // 移除console } }, sourceMap: false, // 开启多线程 parallel: true })
webpack4并需要uglifyjs-webpack-plugin,查看文档https://webpack.js.org/configuration/optimization/#optimization-minimizer,也没有相关配置。使用 terser-webpack-plugin 代替,实现生产去除 console.log,配置如下
optimization: { minimizer: [ new TerserPlugin({ minify: (file, sourceMap) => { // https://github.com/mishoo/UglifyJS2#minify-options const uglifyJsOptions = { /* your `uglify-js` package options */ compress:{ drop_console:true } }; if (sourceMap) { uglifyJsOptions.sourceMap = { content: sourceMap, }; } return require('uglify-js').minify(file, uglifyJsOptions); }, }), ], },
使用vue-cli,配置移除console。
参考:vuecli3+webpack4优化实践(删除console.log和配置dllPlugin)、vue cli 3.x 生产环境去除console采坑记
使用babel-plugin-transform-remove-console插件
npm install babel-plugin-transform-remove-console --save-dev
const plugins = ["@vue/babel-plugin-transform-vue-jsx"] // 生产环境移除console if(process.env.NODE_ENV === 'production') { plugins.push("transform-remove-console") } module.exports = { plugins: plugins, presets: [ [ '@vue/app', { modules: false, targets: { browsers: ["> 1%", "last 2 versions", "not ie <= 8", "Android >= 4", "iOS >= 8"] }, useBuiltIns: 'entry', } ] ] }
我都是自己配置webpack4,打包vue,安利下:webpack4从零开始搭建react与vue工程过程实录
转载本站文章《webpack4与UglifyJs打包如何清除(删除)console,配置uglifyOptions参数》,
请注明出处:https://www.zhoulujun.net/html/tools/Bundler/webpack/2019_1009_8165.html
延伸阅读:
- webpack4.x 升级react-router v4 发现history 冲突
- webpack外网访问设置—webpack-dev-server配置及跨域解决
- webpack编译sass,缺少vendor, node-sass报 vendor错误
- webpack css背景图片无法现实,图片路径404
- webpack scripts copyfiles copy图片至dist目录
- webpack一直报Invalid Host header
- process.argv妙用:webpack打包,自定义命令参数
- webpack执行终端shell命令操作系统:webpack-shell-plugin
- webpack4循环依赖:UnhandledPromiseRejectionWarning: Error: Cyclic dependency
- Webpack热更新实现原理代码分析
- webpack5新功能展望
- webpack外网ip访问
- webpack多页面配置
- 代码分隔/分包/异步加载:webpack实现组件与路由懒加载原理
- webpack4从零开始搭建react与vue工程过程实录
- 再谈webpack性能优化