[react]項目從開發版本到生産版本

開發人員在開發react項目的時候可能為了程式設計需要，或者是調試需要，在代碼的某些地方增加了背景列印，或者說是react給你發出了一些警告資訊，等等。這些内容都不應該出現在生産環境中，是以我們可以使用一個插件來過濾出這些東西，以使得我們的生産版本更加的簡潔高效。

一般而言，項目的打包工具有很多種類，這裡說的是webpack打包工具建構生産版本。你需要知道webpack的兩個插件：

UglifyJsPlugin 和 DefinePlugin。

如果在你操作之前并沒有安裝插件請先安裝，UglifyJsPlugin簡要步驟如下：

npm i -D uglifyjs-webpack-plugin           

在webpack.config.js中配置：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  //...
  optimization: {
    minimizer: [
      new UglifyJsPlugin()
    ]
  }
}           

詳細配置參數和内容參見（

https://webpack.js.org/plugins/uglifyjs-webpack-plugin/

）。

DefinePlugin 安裝配置比較繁瑣，其主要配置内容參見（

https://webpack.js.org/plugins/define-plugin/#src/components/Sidebar/Sidebar.jsx

），這裡尚未去深究。

如果你在建構react項目使用的腳手架create-react-app建構，以上的配置内容已經配置到對應的檔案之下。如果你檢視不到對應的配置檔案夾config，參見另外的内容