كيف يتم تضمين متغيرات 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

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية