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

Question

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

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

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

Answer 1

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 2

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

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 3

几个选项：

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标志