react版本:“^18.3.1”
参考地址:
在creact-react-app当中使用craco插件,配置生产环境取消console解决办法
TerserWebpackPlugin详解
第一篇末尾配置文件
const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
webpack: {
// 别名
alias: {
"@": path.resolve("src"),
},
plugins: [
new TerserPlugin({
sourceMap: true, // 此处造成报错
terserOptions: {
ecma: undefined,
warnings: false,
parse: {},
compress: {
drop_console: process.env.NODE_ENV === "production", // 生产环境下移除控制台所有的内容
drop_debugger: false, // 移除断点
pure_funcs:
process.env.NODE_ENV === "production" ? ["console.log"] : "", // 生产环境下移除console
},
},
}),
],
}
按上述代码执行后报“options has an unknown property ‘sourceMap’”,查询后知Terser 插件的高版本不能设置 sourceMap。(低版本Terser 有sourceMap参数,但对应低版本react)
修改
module.exports = {
...
webpack: {
plugins: [
new TerserPlugin({
// sourceMap: true, // 此处造成报错,删除
terserOptions: {
ecma: undefined,
warnings: false,
parse: {},
compress: {
drop_console: process.env.NODE_ENV === "production", // 生产环境下移除控制台所有的内容
drop_debugger: false, // 移除断点
pure_funcs: process.env.NODE_ENV === "production" ? ["console.log"] : "", // 生产环境下移除console
},
},
}),
],
configure: webpackConfig => {
if(process.env.NODE_ENV === "production") {
// 去除.map文件
webpackConfig.devtool = false
}
return webpackConfig
}
},
...
}