快捷方式

Question

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

Webpack通过its -d and -p options自行处理这个问题，切换加载器＆＃39; minimize模式（大多数装载机附带相关的缩放器），devtool和类似的东西（我不知道到底是什么）。其中大部分＆＃34;只是工作＆＃34;。

但另一方面，有一些库具有开发和生产模式。例如，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选项时究竟有什么变化，以及它如何影响所有装载机和插件。我没有在任何地方找到它。现有文档仅提及＆＃34;调试模式＆＃34;或＆＃34;观看模式＆＃34;没有解释它实际意味着什么。

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

Answer 1

快捷方式

就像你说的那样，-d是--debug --devtool source-map --output-pathinfo的捷径，其中：

--debug 激活加载器的调试模式，其行为取决于每个加载器。您可以通过webpack.config.js

{ debug: true }

--devtool 基本上允许通过参数{ 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，其中：

--optimize-minimize 会将 webpack.optimize.UglifyJsPlugin 添加到您的模块插件中，这会缩小您的代码（删除空格，变换名称和其他优化）< / LI>
--optimize-occurence-order 会将 webpack.optimize.OccurenceOrderPlugin 添加到插件列表中，该列表会为您最常用的依赖项降低ID，因此代码会更小

_{例如：您已在每个文件中导入react，而网站包将尝试按__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;

如果您想查看这些参数的实际解析，请查看See all options

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

1 个答案:

快捷方式

全部放在一起