Load json settings with Webpack for different environments-CodePudding

I'm trying to load different json files, depending on environment. More precisely I want to load appsettings.development.json when its on my NODE.ENV = "development", and then use it inside typescript as global config object. Also when my NODE.ENV will change to "production" i want to load appsettings.production.json.

I have already configured webpack for different builds with files like webpack.config.js, webpack.config.dev.js, webpack.config.prod.js.

I know I can load json files with webpack using json-loader like here:http://blog.jonathanargentiero.com/how-to-load-a-json-content-inside-a-js-module-with-webpack/

But I don't see a way for changing which file I will be using in this section: import config from '../config.json';

If I could add something like import config from `.../config.${NODE.ENV}.json` it would be perfect?

CodePudding user response：

You could simply pass the relative path of your configuration file in package.json, and then retrieve it in your webpack file.

//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
    }
}

please note this exemple is valid for Webpack 5.