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

Question

在Grunt或Gulp中,我过去常常自己定义所有需求,例如:应该只为生产缩小内容,应该只在dev服务器中启用livereload.

的WebPack处理这种自身,通过它-d和-p选项,即切换装载机minimize模式(最装载机船舶及其相关的minifiers)中,devtool以及类似的东西(我不知道究竟是什么).大多数"只是有效".

但另一方面,有些库具有开发和生产模式.例如,React查看process.NODE_ENV,如果是production,它会禁用propTypes检查(稍后将由minifier剥离为死代码,从而减少包大小).在Webpack中,一种常见的方法是使用DefinePlugin.

问题是,这个插件应该只在生产版本中启用.因此,有些人甚至拥有2个单独的webpack配置.这看起来有点过头了,因为大部分工作都是由webpack完成的.我想避免这种情况.

为了找到更好的解决方案,我想了解当我使用-dor -p选项时究竟有什么变化,以及它如何影响所有的加载器和插件.我没有在任何地方发现它.现有文档只是提到"调试模式"或"监视模式"而没有解释它实际意味着什么.

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

Answer 1

快捷键

就像你说的,-d是一个快捷方式--debug --devtool source-map --output-pathinfo:

1. --debug激活加载器的调试模式,其行为取决于每个加载器.您可以通过{ debug: true }webpack.config.js中的param激活它
2. --devtool基本上是允许通过参数去选择sourcemaps为您的文件的类型{ devtool: "sourcemap" },或者如果您使用的WebPack @ 2: { devtool: 'eval-cheap-module-source-map' }(查看所有选项)
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