重构之路：webpack分离生产环境与开发环境

序言

在开发应用时，我们经常需要在不同的环境下进行开发和部署，如开发环境、测试环境和生产环境等。 webpack作为一款强大的前端构建工具，也支持对不同环境的配置。本文将介绍如何利用 webpack 区分生产环境和开发环境的配置文件，让构建更加高效便捷。

从webpack的process说起

webpack配置中有这样一个特殊的对象 —— process。它提供了许多与当前环境相关的信息，例如 process.env.NODE_ENV。你可以利用它来决定是否启用某些插件，或者是改变某些配置。

最常见的做法是将 process.env.NODE_ENV 设置为 "development" 或 "production"。

• "development"：表示当前环境为开发环境。你可以启用诸如 source map 之类的插件，这些插件可以帮助你调试代码。你也可以设置更宽松的代码检查规则，以便在开发期间快速迭代。
• "production"：表示当前环境为生产环境。你应该禁用所有不必要的插件，以减少最终代码的体积。你也可以启用更严格的代码检查规则，以确保代码质量。

当然，你也可以将 process.env.NODE_ENV 设置为其他值，例如 "test" 或 "staging"。

单独配置文件法

这是最简单的一种方法。你只需为每个环境创建一个单独的 webpack 配置文件。例如，你可以创建一个名为 webpack.config.dev.js 的文件，供开发环境使用；再创建一个名为 webpack.config.prod.js 的文件，供生产环境使用。

在命令行中，你可以使用以下命令来运行 webpack：

webpack --config webpack.config.dev.js

webpack --config webpack.config.prod.js

环境变量法

你也可以使用环境变量来区分生产环境和开发环境的 webpack 配置。例如，你可以设置一个名为 NODE_ENV 的环境变量。在开发环境中，你可以将它设置为 "development"；在生产环境中，你可以将它设置为 "production"。

然后，你可以在 webpack 配置文件中使用 process.env.NODE_ENV 来区分不同环境的配置。例如，你可以使用以下代码来启用 source map：

if (process.env.NODE_ENV === 'development') {
  config.devtool = 'source-map';
}

npm scripts

你也可以使用 npm scripts 来区分生产环境和开发环境的 webpack 配置。例如，你可以创建一个名为 "start" 的脚本，用于运行开发环境的 webpack；再创建一个名为 "build" 的脚本，用于运行生产环境的 webpack。

在 package.json 文件中，你可以使用以下代码来定义这些脚本：

{
  "scripts": {
    "start": "webpack --config webpack.config.dev.js",
    "build": "webpack --config webpack.config.prod.js"
  }
}

然后，你就可以使用以下命令来运行 webpack：

npm run start

npm run build

总结

以上便是区分生产环境和开发环境webpack配置的方法。你也可以根据自己的需求，选择最适合你的方法。