使用Webpack为不同的环境加载json设置

Question

我正在尝试加载不同的json文件，具体取决于环境。更准确地说，我想加载appsettings.development.json时，它在我的节点。ENV = "development"，然后在typescript中使用它作为全局配置对象。也当我的NODE。ENV将改为"生产"。我想加载appsettings.production.json.

我已经为不同的构建配置了webpack，如webpack.config.js, webpack.config.dev.js, webpack.config.prod.js。

我知道我可以加载json文件与webpack使用json-loader像这里:http://blog.jonathanargentiero.com/how-to-load-a-json-content-inside-a-js-module-with-webpack/

但是我没有办法改变我将在这一节中使用的文件:import config from '../config.json';

如果我能添加一些像import config from `.../config.${NODE.ENV}.json`它将是完美的吗?

Answer 1

您可以简单地在package中传递配置文件的相对路径。Json，然后在webpack文件中检索它。

//package.json
"dev": "webpack serve --env development conf=configs/local.json",
"stage": "webpack serve --env development conf=configs/stage.json", 
"build": "webpack --env production conf=configs/prod.json",
// webpack
module.exports = (env) => {
const conf = path.resolve(process.cwd(), env.conf);
return {
mode: nodeEnv,
entry: "./src/index.tsx",
//... blabla
}
}

请注意这个例子对Webpack 5有效。