我无法理解如何将参数传递给 webpack 配置(webpack 版本 5)。一些奇怪的行为。
这是 webpack 配置,webpack.config.js:
const path = require('path');
module.exports = (env, argv) => {
return {
mode: env.mode,
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
clean: true
}
}
};
这是节点项目本身的配置,package.json:
{
"name": "mywebpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.93.0",
"webpack-cli": "^5.1.4"
}
}
这就是我调用构建脚本的方式:
npm run build --env mode=development
预期的行为是 webpack 配置中的函数中的 env 参数将有一个 mode 字段,其值将是字符串“development”。但实际上这不会发生,我收到错误
[webpack-cli] Unknown command or entry 'mode=development'
从中可以清楚地看出没有 env.mode。
如果您向构建脚本添加任意参数,例如如下所示:
"scripts": {
"build": "webpack --env foo=bar"
}
再次运行npm run build --env mode=development
,env.mode就被填满了。我可以通过最终 main.js 文件中的更改来判断这一点;其中出现开发“tinsel”,如果将其转移到生产环境,那么它就会相应消失。
那些。看起来如果脚本描述没有描述单个参数,则根本不会创建参数的对象。但是如果我们在脚本描述中描述至少一个参数,那么在调用这个脚本时我们将能够传递至少10个参数,并且所有这些参数都将成为第一个参数(env)的字段。那么它有效吗?这是第一个问题。
另外,第二个参数 argv 的用途尚不清楚。从文档来看,它应该在运行脚本时收集我们传递的所有参数--
(而不是通过 --env)。那些。例如,如果npm run build --hello="Hello, world!"
,则 argv.hello 将包含字符串“Hello, world!”。然而,事实并非如此:
const path = require('path');
module.exports = (settings, argv) => {
console.log("argv.hello=" + argv.hello); // argv.hello=undefined
return {
mode: argv.mode,
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
clean: true
}
}
};
该文件传达了事实--mode=production
,即你可能会认为这种方式不能传递任意参数,而只能传递 webpack 已知的参数,比如 mode。但是,我尝试像这样传递--mode,它也是未定义的。最终如何正确使用第二个argv参数?这是第二个问题。