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=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'
}

Answer 3

您可以使用argv包并设置变量。您必须在module.export之前执行此操作。

Answer 4

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

例如以下命令：

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

将产生以下环境对象：

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

然后您可以像这样在配置中使用它：

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

在此处阅读更多信息：Webpack - Environment Variables

Answer 5

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

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

并在您的Webpack中使用它们

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

Answer 6

在我看来，传递参数的最简单方法是使用Node。 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

等

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

6 个答案: