webpack - 如何在 webpack 中使用多个配置文件？

Question

我正在构建一个 webpack 自动化工作流程。我完成了开发服务器。我所有的开发配置都在webpack.config.js文件中。

然后，我通过将它添加到package.json脚本中'dev':'webpack-dev-server'

如何在单独的文件中进行生产配置？

Answer 1

有一些方法可以做到这一点。也许最简单的一种是指定要使用的配置文件。通过配置文件阅读更多关于 webpack使用的信息。

在您的 with 添加另一个脚本package.json：

"build": "webpack --config ./path-to/webpack.config.prod.js"

将您的生产配置对象放在webpack.config.prod.js.

---

另一种方法是使用npm 生命周期事件。更新您当前的webpack.config.js脚本以检查目标脚本并决定使用哪个配置：

const TARGET = process.env.npm_lifecycle_event;
if (TARGET === 'dev') {
   module.exports = require('./path-to/webpack.config.dev.js');
}
if (TARGET === 'build') {
   module.exports = require('./path-to/webpack.config.prod.js');
}

你可以在 GitHub 上的这个webpack-demo项目中找到以前的方法。

Answer 2

几个选项：

1. 使用webpack 合并

2. 使用多个配置并使用--config-name 选项在它们之间进行选择

3. 如果您不介意将 webpack 配置对象 (module.exports) 更改为此处所述的函数，则可以在 webpack.config.js 中执行以下操作：

   module.exports = (env, argv) => {
        return {
           //your config here, do something with the mode
              mode: env.mode
           };
       };
   

并通过使用 --env 标志调用 webpack 将模式传递到您的配置中：

npx webpack --env mode=development

或者像这样将它添加到你的 package.json 中：

  "scripts": {
      "watch": "webpack --watch --env mode=development",
      "build": "webpack --env mode=production"
    }

尽管如果您只想切换模式，则可以使用--mode标志

Answer 3

npm 模块webpack-merge是一种在 webpack 中拥有多个配置文件的舒适方式。它允许拥有一个通用配置文件和其他几个从该配置文件“扩展”的文件，如以下示例所示。

安装

npm install webpack-merge

常见的 webpack 配置文件

这将是您的其他文件之间的通用配置所在的位置。

webpack.common.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: "Output Management",
      template: "src/index.html",
    }),
  ],
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
};

扩展文件

我决定在示例中使用开发和生产配置文件，但可以使用任意数量。

webpack.dev.js

const path = require("path");

const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");

module.exports = merge(common, {
  mode: "development",
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 9000,
  },
});

webpack.prod.js

const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");

module.exports = merge(common, {
  mode: "production",
});

在这两种方法中，您都可以导入合并功能并使用它来创建文件，而无需复制代码。在您的脚本中，您可以像这样简单地调用扩展配置文件。

包.json

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

Answer 4

在监视模式下，您可以使用package.json中的 NODE_ENV 前缀运行 webpack ，例如：

{
  ...
  "scripts": {
    "watch": "NODE_ENV=development webpack --watch",
    "build": "NODE_ENV=production webpack",
    ...
  }
}

然后在webpack.config.js中使用该预设（ process.env.NODE_ENV）：

const mode = process.env.NODE_ENV;

const config = {
  mode,
  // ... common configuration
};

if (mode === 'development') {
  // update config object for development
} else if (mode === 'production') {
  // update config object for production
}

module.exports = config;