我有一个简单的webpack.config.js
module.exports = { entry: "./app.js", output: { filename: "bundle.js" }, }
我想通过命令行参数传递entry和output的值,这可能吗?我该怎么做?
entry
output
2cmtqfgy1#
webpack.config.js也可以导出一个env函数,它可以返回一个conf对象。因此,您可以有一个webpack配置如下:
webpack.config.js
module.exports = env => { return { entry: env === "production" ? "./app.js": "app-dev.js", output: { filename: "bundle.js" }, } };
然后从命令行(或package.json)调用webpack,如下所示:
webpack --env=production
js4nwp542#
您可以通过在命令行上传递环境变量来提供自定义参数。在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配置中的环境变量
webpack --env entry='./app.js' --env output='bundle.js'
webpack --env.entry='./app.js' --env.output='bundle.js'
module.exports = env => ({ entry: env.entry, output: { filename: env.output }, });
lymnna713#
您也可以使用--env=key=value将多个键-值对传递给您的config:
--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), }, } }
通过这种方式传递的所有值都可以作为config中的一个对象使用,这使得它们很容易使用。
{ WEBPACK_BUNDLE: true, mode: 'production', branch: 'feature-x', foo: 'bar' }
lyr7nygr4#
您可以使用--env CLI参数将任意参数传递给config。例如,以下命令:
--env
webpack --env entry=./entry.js --env output=./output.js
将生成以下env对象:
{entry: './entry.js', output: './output.js'}
然后您可以在配置中使用它,如下所示:
在此阅读更多信息:Webpack - Environment Variables
4dbbbstv5#
您可以使用argv包并设置变量,但必须在module.export之前进行。
module.export
q7solyqu6#
在我看来,传递参数最简单的方法是使用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)轻松地解析它们(当然也可以手动解析)。因此,您可以毫无问题地执行以下操作:一个二个一个一个等等。
wlsrxk517#
我有一个解决方案,为那些使用ES模块的Webpack配置。当我们logprocess.argv有一个参数数组,我们可以检查,如果我们需要的一个或没有。例如:
log
process.argv
{ "scripts": { "watch:foo": "webpack --watch --env foo" }, }
对于上面的命令,我们需要做的就是检查process.argv是否有我们传递的参数:
const isFoo = process.argv.indexOf('foo') > -1;
yb3bgrhw8#
如果您通过npm调用webpack,您可以简单地调用:
npm run watch --some_option=value
然后访问该值并在webpack.config.js中提供默认值,方法是:
const some_option = process.env.npm_config_some_option || 'defaultValue'
8条答案
按热度按时间2cmtqfgy1#
webpack.config.js
也可以导出一个env函数,它可以返回一个conf对象。因此,您可以有一个webpack配置如下:然后从命令行(或package.json)调用webpack,如下所示:
js4nwp542#
您可以通过在命令行上传递环境变量来提供自定义参数。在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配置中的环境变量
lymnna713#
您也可以使用
--env=key=value
将多个键-值对传递给您的config:或(使用webpack-dev-server进行开发):
webpack.config.js
将如下所示:通过这种方式传递的所有值都可以作为config中的一个对象使用,这使得它们很容易使用。
lyr7nygr4#
您可以使用
--env
CLI参数将任意参数传递给config。例如,以下命令:
将生成以下env对象:
然后您可以在配置中使用它,如下所示:
在此阅读更多信息:Webpack - Environment Variables
4dbbbstv5#
您可以使用argv包并设置变量,但必须在
module.export
之前进行。q7solyqu6#
在我看来,传递参数最简单的方法是使用Node. Webpack作为接收参数的一个,您可以将您的命令行参数保存在一个专用的环境变量中(它只存在于会话中):
然后在main.js中(您想要解析它们的任何地方),您从专用环境变量中检索命令行参数。
由于您将检索传递给Webpack的所有参数,因此,您将能够使用任何节点模块(例如yargs)轻松地解析它们(当然也可以手动解析)。
因此,您可以毫无问题地执行以下操作:
一个二个一个一个
等等。
wlsrxk517#
我有一个解决方案,为那些使用ES模块的Webpack配置。当我们
log
process.argv
有一个参数数组,我们可以检查,如果我们需要的一个或没有。例如:
对于上面的命令,我们需要做的就是检查
process.argv
是否有我们传递的参数:yb3bgrhw8#
如果您通过npm调用webpack,您可以简单地调用:
然后访问该值并在
webpack.config.js
中提供默认值,方法是: