webpack 开发和生产构建模式有什么区别？

Question

在 Grunt 或 Gulp 中，我过去常常自己定义所有要求，例如：内容应该只在生产中被缩小，livereload 应该只在开发服务器中启用。

Webpack 通过its -d and -p options 自行处理这个问题，切换加载器的minimize 模式（大多数加载器都附带相关的缩小器）、devtool 和类似的东西（我不知道具体是什么） .其中大部分“正常工作”。

但另一方面，也有一些库具有开发和生产模式。例如，React 查看process.NODE_ENV，如果是production，则为disables the propTypes checking（稍后将被minifier 剥离为死代码，从而减少包大小）。在 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 中的参数{ debug: true } 激活它
2. --devtool 基本上允许通过参数{ devtool: "sourcemap" } 为您的文件选择源映射类型，或者如果您使用 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;

如果您想查看这些参数的实际解析，请查看https://github.com/webpack/webpack/blob/master/bin/convert-argv.js#L19