前言

本文基于

• “react”: “^18.2.0”

1.暴露隱藏的webpack配置

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

yarn eject

會出現一個命令提示：這是一個單向操作，確認操作后不可逆轉/返回?

輸入 y 回車

成功之后 在項目根目錄會出現一個 scripts 文件夾

2.配置生產環境不輸出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.*函數的調用
    drop_debugger: true, // 刪除所有debugger
    pure_funcs: ['console.log', 'console.dir'], // 刪除特定的console.*函數的調用
  }
);

3.查看效果

開發環境

yarn start

生產環境

yarn build

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

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