如何将参数传递给 webpack.conf.js？

Question

我正在遵循基于此项目（官方 Vue Webpack 模板）的这些说明。

这就是我所做的：

包.js：

"scripts": {
  "dev": "node build/dev-server.js",
  "dev-alt": "node build/dev-server.js && set arg=alt&&webpack"
},

webpack.base.config.js：

// npm run dev-alt in the terminal 
console.log('ARGS:', process.env.arg)

然而ARGS:输出undefined.

这样做的正确方法是什么？

Answer 1

使用 Webpack5.x及以上版本，您不能再将自定义参数传递给 Webpack 之类的--myarg=val. 但是您仍然可以传递支持的参数，例如--mode=production.

那么自定义args的解决方案是什么？相反，我们需要使用新--env参数像这样编写它。

  "build-project": webpack --mode=production --env myarg=val --env otherarg=val

请注意，自定义参数--在我们放在--env它们前面之后不再开始。您需要将需要--env定义的每个自定义键/值对放在前面。

你还需要修改你的 Webpack 配置来导出一个函数，而不是一个对象。

请参阅此示例代码，取自文档。

const path = require('path');

module.exports = (env) => {
  // Use env.<YOUR VARIABLE> here:
  console.log('NODE_ENV: ', env.NODE_ENV); // 'local'
  console.log('Production: ', env.production); // true

  return {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
  };
};

Answer 2

--key=value使用in传递 webpack 参数package.json

"scripts": {
 "build": "webpack --mode=production --browser=firefox",
}

像argv这样访问webpack.config.js

module.exports = (env, argv) => {
  if (argv.mode == "development") {
  }

  if (argv.browser == "firefox") {
  }
};

Answer 3

您可以通过以下方式传递任何您想要的参数：

node my-script.js --myArgs thisIsTheValue

在 my-script.js 中，您可以通过以下方式检索参数：

function getArg(key, defaultVal) {
    var index = process.argv.indexOf(key),
        next = process.argv[index + 1];

    defaultVal = defaultVal || null;

    return (index < 0) ? defaultVal : (!next || next[0] === "-") ? true : next;
}

var theArgsIWant = getArg('--myArgs', 'this is the default if argument not found');