前言

本文基于

• “react”: “^18.2.0”

1.暴露隱藏的webpack配置

react官方腳手架默認(rèn)是將 webpack 配置隱藏起來了，在進(jìn)行配置之前需要將 webpack 配置暴露出來

yarn eject

會出現(xiàn)一個命令提示：這是一個單向操作，確認(rèn)操作后不可逆轉(zhuǎn)/返回?

輸入 y 回車

成功之后 在項(xiàng)目根目錄會出現(xiàn)一個 scripts 文件夾

2.配置生產(chǎn)環(huán)境不輸出console.log

打開 scripts 文件夾下的 build.js 文件

搜索 configFactory， 并添加如下配置

config.optimization.minimizer[0].options.minimizer.options.compress = Object.assign(
  config.optimization.minimizer[0].options.minimizer.options.compress,
  {
    drop_console: false, // 刪除所有console.*函數(shù)的調(diào)用
    drop_debugger: true, // 刪除所有debugger
    pure_funcs: ['console.log', 'console.dir'], // 刪除特定的console.*函數(shù)的調(diào)用
  }
);

3.查看效果

開發(fā)環(huán)境

yarn start

生產(chǎn)環(huán)境

yarn build

如果本篇文章對你有幫助的話，很高興能夠幫助上你。

當(dāng)然，如果你覺得文章有什么讓你覺得不合理、或者有更簡單的實(shí)現(xiàn)方法又或者有理解不來的地方，希望你在看到之后能夠在評論里指出來，我會在看到之后盡快的回復(fù)你。