javascript - 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 选项时到底发生了什么变化，以及它如何影响所有加载程序和插件。我没有在任何地方找到它的记录。现有文档仅提及“ Debug模式”或“监视模式”，而没有解释其实际含义。

_{请注意，我不是在要求做这个做那个的答案。一个好的、详细的解释将不胜感激。}

Answer 1

快捷方式

就像你说的，-d 是 --debug --devtool source-map --output-pathinfo 的快捷方式，其中:

1. --debug 激活加载程序的 Debug模式，其行为取决于每个加载程序。您可以通过 param { debug: true } 在您的 webpack.config.js 中激活它
2. --devtool 基本上允许通过参数 { devtool: "sourcemap"} 为您的文件选择源映射类型，或者如果您使用 webpack@2: { devtool: 'eval-cheap-module-source-map' }( See all options )
3. --output-pathinfo 会将原始文件路径写入 webpack 的 require 中，如下所示:__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;

If you want to look at actual parsing of these params, look at https://github.com/webpack/webpack/blob/master/bin/convert-argv.js#L19