将命令行参数传递给webpack.config.js

Question

我有一个简单的webpack.config.js

module.exports = {
  entry: "./app.js",
  output: {
    filename: "bundle.js"
  },
}

我想通过值entry和output通过命令行参数.这可能吗,我该怎么做？

Answer 1

webpack.config.js也可以导出一个可以返回conf对象的env函数.因此,你可以有一个webpack配置,如:

module.exports = env => {
    return {
        entry: env === "production" ? "./app.js": "app-dev.js",
        output: {
          filename: "bundle.js"
        },
    }
};

然后从命令行(或package.json)调用webpack,如下所示:

webpack --env=production

Answer 2

您可以env从命令行为变量提供自定义参数，因此对于此示例，您可以调用：

webpack --env.entry='./app.js' --env.output='bundle.js'

并通过执行在您的 webpack 中使用它们

module.exports = env => ({
  entry: env.entry,
  output: {
    filename: env.output
  },
});

Answer 3

您还可以使用以下命令将多个键值对传递给您的配置--env=key=value：

webpack --env=mode=production --env=branch=develop

或（使用 webpack-dev-server 进行开发）：

webpack serve --env=mode=production --env=branch=develop

webpack.config.js 看起来像这样：

webpack --env=mode=production --env=branch=develop

以这种方式传递的所有值都可以作为配置中的对象使用，这使得它们易于使用。

webpack serve --env=mode=production --env=branch=develop

Answer 4

您可以使用--envCLI 参数将任意参数传递给配置。

例如，以下命令：

webpack --env entry=./entry.js --env output=./output.js

将产生以下 env 对象：

{entry: './entry.js', output: './output.js'}

然后您可以在配置中使用它，如下所示：

module.exports = env => ({
  entry: env.entry,
  output: {
    filename: env.output
  },
});

在这里阅读更多内容：Webpack - 环境变量