تحميل إعدادات json باستخدام Webpack لبيئات مختلفة

يمكنك تمرير المسار النسبي لملف التكوين الخاص بك في 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
    }
}
    

كما تلاحظ في ملف package.json تم تمرير المسار النسبي لملف التكوين باستخدام الخاصية conf وتم استعادته في ملف webpack باستخدام path.resolve

يمكنك استخدام المكتبة المساعدة dotenv

// webpack.config.js
const Dotenv = require('dotenv-webpack');

module.exports = {
  ...
  plugins: [
    new Dotenv()
  ]
  ...
};

لتحميل ملف على أساس البيئة ، يمكنك الاستفادة من process.env.NODE_ENV

// webpack.config.js
const Dotenv = require('dotenv-webpack');
const env = process.env.NODE_ENV;

module.exports = {
  ...
  plugins: [
    new Dotenv({
      path: `./.env.${env === "production" ? "prd" : "dev"}`,
    })
  ]
  ...
};