Webpack：单独生产和开发构建

Question

我最近开始评估webpack。之前使用过grunt我习惯了这样一个事实：我可以用各种参数开始咕噜咕噜来配置构建过程中会发生什么。例如：

grunt watch

将运行调试版本并启用监视任务。虽然：

grunt build

将触发完全最小化的生产构建，该构建禁用所有特定于开发的功能。

我想知道 webpack 是否具有类似的功能，可让我轻松切换不同的配置。我已经做了一些研究，但我不喜欢到目前为止看到的方法：

• 我在调用NODE_ENV=production之前看到了指定webpack的建议，但这不是平台独立的（例如，在Windows上不起作用）。
• 使用-p开关，但这似乎只会影响最小化
• 为webpack使用单独的配置文件，但我更喜欢一种解决方案，我不需要维护两个单独的文件。

我知道 webpack 实际上并不是像 grunt 或 gulp 这样的任务运行器，而是模块捆绑器 EM>。但它被提升为 grunt 或 gulp see this Medium.com Blog的替代品。

我真正希望看到的是使用webpack watch获得开发构建的能力以及使用webpack或webpack build的生产构建是可以使用webpack

Answer 1

首先，如果您使用webpack-dev-server，很容易理解您处于开发模式：

let isDevMode = process.argv[1].endsWith('webpack-dev-server') || process.argv[1].endsWith('webpack-dev-server.js');

首先是Linux / mac，第二个是Windows。

然后使用它来配置文件。

如果您没有使用dev服务器，您可以在运行webpack时传递任何参数，就像使用任何nodejs脚本一样（我使用minimist来读取参数但它只是一个糖，不要使用如果你不需要）：

let argv = require('minimist')(process.argv.slice(2));

let isDevMode = argv.dev; // or watch or whatever you want to pass

然后以这种方式调用它：

webpack --dev

这实际上是一种非常灵活的做很多事情的方式，而不仅仅是指定开发模式。我也用它来指定包名称等。你唯一需要关心的是避免使用webpack本身提供的参数。