webpack開發和生產構建模式有什麼區別？

Question

在Grunt或Gulp中，我曾經自己定義所有需求，比如：stuff只能用於生產，livereload只能在dev服務器上啓用。

的WebPack處理這對自己，通過its -d and -p options，即切換裝載機minimize模式（最裝載機船舶及其相關的minifiers），該devtool和類似的東西（我不知道到底是什麼）。大多數「只是有效」。

但另一方面，有一些庫有一個開發和生產模式。例如，React查看process.NODE_ENV，如果它是production，則它disables the propTypes checking（稍後將由縮小器作爲死代碼剝離，從而減少捆綁包大小）。在Webpack中，一個common way to do this is to use the DefinePlugin。

問題是，這個插件只能在生產版本中啓用。因爲這個，有些人甚至去了having 2 separate webpack configs。這看起來有點矯枉過正，因爲大部分工作已經由webpack完成了。我想避免這種情況。

要找到一些更好的解決辦法，我想了解究竟是什麼改變當我使用-d或-p選項，以及它如何影響所有的裝載機和插件。我沒有在任何地方找到它。現有的文檔只是提到「調試模式」或「監視模式」，而沒有解釋它實際上意味着什麼。

_{請注意，我並沒有要求做這個答案。一個好的，詳細的解釋將不勝感激。}

Answer 1

快捷方式

就像你說的，-d是--debug --devtool source-map --output-pathinfo一個快捷方式，其中：

1. --debug激活調試模式裝載機和其行爲取決於每個裝載機。您可以在webpack.config.js通過PARAM { debug: true }激活
2. --devtool基本上是允許通過PARAM { devtool: "sourcemap" }選擇sourcemaps爲您的文件的類型，或者如果您使用的WebPack @ 2：{ devtool: 'eval-cheap-module-source-map' }（See all options）
3. --output-pathinfo會將原始文件路徑寫入webpack的需求中，如下所示：__webpack_require__(/* ./src/containers/App/App.js */15)。
   您可以通過激活它：{ output: { pathinfo: true } }

第二個快捷方式，-p代表--optimize-minimize --optimize-occurence-order其中：

1. --optimize-minimize將增加webpack.optimize.UglifyJsPlugin到您的模塊插件將運行如下代碼（刪除空格，修改變量名稱和其他優化）

2. --optimize-occurence-order將添加webpack.optimize。OccurenceOrderPlugin將插入列表，它將分配您最常用的依賴關係較低的ID，因此代碼將更小。

   _{例如：您已導入的每個文件react和的WebPack會盡量要求它像取而代之的是__webpack_require__(1);__webpack_require__(1266);}

把所有在一起

所以，你的情況如果你有webpack.config.js，你可以這樣改變它：

var webpack = require('webpack'); 
var webpackConfig = { 
    // here goes your base config 
}; 

// -d shortcut analogue 
if (process.env.NODE_ENV === 'development') { 
    webpackConfig.debug = true; 
    webpackConfig.devtool = 'sourcemap'; 
    webpackConfig.output.pathinfo = true; 
} 

// -p shortcut analogue 
if (process.env.NODE_ENV === 'production') { 
    webpackConfig.plugins.push(new webpack.DefinePlugin({ 
    'process.env.NODE_ENV': JSON.stringify('production') 
    })); 
    webpackConfig.plugins.push(new webpack.optimize.UglifyJsPlugin()); 
    webpackConfig.plugins.push(new webpack.optimize.OccurenceOrderPlugin()); 
} 

module.exports = webpackConfig; 

如果你想看看這些則params的實際的解析，看看https://github.com/webpack/webpack/blob/master/bin/convert-argv.js#L19