Question

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

然后，我通过package.json

将其添加到'dev':'webpack-dev-server'脚本中

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

Answer 1

有一些方法可以实现这一目标。也许最简单的是指定要使用的配置文件。阅读有关webpack usage with config file的更多信息。

在package.json中添加另一个脚本：

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

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

中

另一种方法是使用npm lifecycle event。更新当前的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

在 watch mode 中，您可以从 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;

Answer 3

几个选项：

使用webpack-merge
使用 multiple configurations 并使用 --config-name option
在它们之间进行选择
如果您不介意将您的 webpack 配置对象 (module.exports) 更改为所描述的函数 here，您可以在 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 4

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

安装

npm install --save-dev 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",
});

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

package.json

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

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

4 个答案: