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

【问题标题】：Passing command line arguments to webpack.config.js将命令行参数传递给 webpack.config.js
【发布时间】：2017-10-22 03:22:19
【问题描述】：

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

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

我想通过命令行参数传递entry和output的值。这可能吗？我该怎么做？

【问题讨论】：

你试过environment variables吗？

标签： javascript webpack

【解决方案1】：

webpack.config.js 还可以导出一个 env 的函数，该函数可以返回一个 conf 对象。因此，您可以有一个 webpack 配置，例如：

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

然后像这样从命令行（或 package.json）调用 webpack：

webpack --env=production

【讨论】：

这不适用于 Webpack 1 对吧？因为它抛出了配置文件不返回对象的错误
@MatiasFernandezMartinez 有点晚了，但是在 webpack 3 或 4 中添加了导出函数
从您的回答中不清楚这个env 参数是否神奇或者我们可以传递任意参数，例如--paramName1=value --paramName2=value
@MikhailBatcer 好问题。看来它必须是--env（.XXX）。见environment variables。感谢 Orkun Tuzel

【解决方案2】：

您可以通过在命令行上传递环境变量来提供自定义参数。 Webpack 版本 4 和 5 之间的语法发生了变化。对于此示例，您将调用：

对于Webpack 5：

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

对于Webpack 4：

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

对于这两个版本，您可以通过以下方式访问 Webpack 配置中的环境变量

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

【讨论】：

从您的回答中不清楚这个env 参数是否神奇或者我们可以传递任意参数，例如--paramName1=value --paramName2=value
这不起作用！ webpack --env.entry='./app.js' --env.output='bundle.js' 正确的是 webpack --env=mode=production --env=branch=develop
@madruga 这适用于 Webpack 4，这是编写此答案时的最新版本。 Webpack 5 的语法现在已经改变。更多信息在这里：webpack.js.org/guides/environment-variables。我现在更新了我的答案以反映这一点。

【解决方案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 看起来像这样：

module.exports = (env) => {
  const mode = env.mode === 'prod' ? 'dev';
  const branch = env.branch ? env.branch : 'develop';

  return {
    entry: mode === 'prod' ? './app.js': 'app-dev.js',
    output: {
      filename: 'bundle.js',
      path: 'dist/' + branch),
    },
  }
}

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

{ 
  WEBPACK_BUNDLE: true,
  mode: 'production',
  branch: 'feature-x',
  foo: 'bar'
}

【讨论】：

【解决方案4】：

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

例如以下命令：

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 - Environment Variables

【讨论】：

此线程中的其他答案语法错误，无法解释如何将其用于任意参数。我的答案涵盖了两者。
@user1934212 这个答案很清楚，支持多个变量，我会把它标记为正确的。

【解决方案5】：

您可以使用argv 包并设置变量。必须在module.export 之前完成。

【讨论】：

谢谢，我一定会尝试的。但是有没有更简单的方法，不需要额外的包参考？毕竟，webpack.config.js 只是 javascript 代码。
您可以通过命令行传递 --env=test 例如，然后您可以导出一个 env 函数，该函数返回一个而不是直接返回一个对象 webpack.js.org/configuration/configuration-types/…
您可以阅读以下内容：justindavis.co/2014/11/24/…
感谢@Axnyff：环境技巧似乎对我有用。如果您将其提升为完整的答案，我可以接受。
我刚做了，你还可以吗？

【解决方案6】：

在我看来，传递参数最简单的方法是使用 Node.js。 Webpack 是接收参数的对象，您可以将命令行参数保存在专用环境变量中（仅存在于会话中）：

// webpack.config.js 
process.env.MY_APPLICATION_NAME_ARGS = JSON.stringify(process.argv)

export default {
...

然后在您的 main.js（您想要解析它们的任何地方）中，您从您的专用环境变量中检索您的命令行参数。

// main.js
const myArgs = JSON.parse(env.MY_APPLICATION_NAME_ARGS )

当您将检索传递给 Webpack 的所有参数时，使用它，您将能够轻松地使用任何节点模块（例如 yargs）来解析它们（当然也可以手动进行）。

因此，您将能够毫无问题地执行此类操作：

webpack ... --opt1 the_value --custom1 something

yarn run dev --opt1 the_value --custom1 something

等等

【讨论】：