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