كيف يتم تضمين متغيرات env في Webpack 5؟

عبد النور محمد · 8 سبتمبر 2021

لدي مشروع Vanilla JS بسيط ، مرفق مع webpack.

هذا هو ملف webpack.dev.js الخاص بي:

const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'development',
  devtool: 'eval-source-map',
  output: {
    path: path.resolve('public'),
    filename: 'dist/bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
        ],
      },
      {
        test: /\.svg$/,
        use: 'file-loader',
      },
    ],
  },
  plugins: [
    new webpack.EnvironmentPlugin(['CUSTOM_PATH']),
  ],
  devServer: {
    static: './public',
  },
};

هذا هو ملف .env الخاص بي:

PATH=...

عند تشغيل المشروع احصل على

Uncaught (in promise) ReferenceError: process is not defined

Wael Aljamal · 8 سبتمبر 2021

لحل مشكلة process is not defined يمكن أن نضيف plugin التالية:

 plugins: [

    new webpack.ProvidePlugin({
      process: 'process/browser',
    }),
  ]

ونقوم بتثبيتها كالتالي:

npm install process

كما يمكن استعمال الplugin التالية webpack.DefinePlugin بدل من webpack.EnvironmentPlugin :

webpack.config.js

module.exports = {
plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
      'process.env.MY_ENV': JSON.stringify(process.env.MY_ENV),
      ... and so on ...
    })
],
}

وتأكد من تضمين حزمة dotenv

const dotenv = require('dotenv').config({ path: __dirname + '/.env' })

في أول ملف webpack.config.js

لتثبيتها:

npm i dotenv

كيف يتم تضمين متغيرات env في Webpack 5؟

السؤال

عبد النور محمد

1 جواب على هذا السؤال

Recommended Posts

Wael Aljamal

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية