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

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

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

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

50661 次浏览
小开

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

小开
最佳答案

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 的版本4和版本5之间，语法发生了变化。对于这个例子，您可以调用:

对于 网络包5:

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

对于 网络包4:

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

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

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

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

等等。

小开

您还可以使用 --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'
}
小开

可以使用 --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-环境变量

小开

对于那些使用 ES 模块进行 Webpack 配置的人，我有一个解决方案。当我们 log process.argv有一个参数的数组，我们可以检查，如果我们需要一个有或没有。

例如:

{
"scripts": {
"watch:foo": "webpack --watch --env foo"
},
}

因此，对于上面的命令，我们需要做的就是检查 process.argv是否有我们传递的参数:

const isFoo = process.argv.indexOf('foo') > -1;

提交答案