使用 webpack 構建的生產模式和開發模式有什么區別？

Question

我有一個完全空的項目，我的意思是我只有一個文件，其中包含 3 個頂級依賴項來響應、react-dom 和 react-redux。

我試圖通過一個簡單的示例來了解 webpack 在每種情況下都在做什么。

我使用這些 npm 腳本：

"scripts": {
    "client": "webpack -w --mode production --config ./webpack.config.js",
    "client-dev": "webpack -w --mode development --config ./webpack.config.js"
  },

並得到這個輸出：

從單個文件/入口點：

// React Modules
import React        from 'react';
import ReactDOM     from 'react-dom';
import { Provider } from 'react-redux';

Answer 1

這兩個選項之間的區別是

開發中 將DefinePlugin上的process.env.NODE_ENV設置為 value development 。 為模塊和塊啟用有用的名稱。

in production 將DefinePlugin上的process.env.NODE_ENV設置為 value production 。 為模塊和塊、 FlagDependencyUsagePlugin 、 FlagIncludedChunksPlugin 、 ModuleConcatenationPlugin 、 NoEmitOnErrorsPlugin和TerserPlugin啟用deterministic mangled名稱。

來自https://webpack.js.org/configuration/mode的 cc，您可以在其中閱讀並查看一些使用它的示例。