Rumah >hujung hadapan web >tutorial js >Bagaimana untuk Lulus Pembolehubah Bergantung Persekitaran dalam Webpack?

Bagaimana untuk Lulus Pembolehubah Bergantung Persekitaran dalam Webpack?

Linda Hamilton
Linda Hamiltonasal
2024-11-09 15:08:02799semak imbas

How to Pass Environment-Dependent Variables in Webpack?

Melalui Pembolehubah Bergantung Persekitaran dalam Pek Web

Apabila memindahkan apl Angular daripada Gulp ke Webpack, tugas biasa ialah mengurus pembolehubah bergantung kepada persekitaran. Berikut ialah tiga cara berkesan untuk mencapai matlamat ini menggunakan Webpack:

1. DefinePlugin

Kaedah ini secara langsung menggantikan pembolehubah dalam halaman HTML menggunakan DefinePlugin:

new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
})

Perhatikan bahawa format rentetan mengekalkan nilai persekitaran pembolehubah.

2. EnvironmentPlugin

EnvironmentPlugin memudahkan proses DefinePlugin dengan memetakan nilai persekitaran kepada kod secara dalaman:

new webpack.EnvironmentPlugin(['NODE_ENV'])

3. Alias

Untuk keperluan konfigurasi yang kompleks, anda boleh menggunakan modul beralias:

Pihak Pengguna:

var config = require('config');

Modul Konfigurasi:

resolve: {
    alias: {
        config: path.join(__dirname, 'config', process.env.NODE_ENV)
    }
}

Ini membolehkan anda mengeksport konfigurasi daripada modul yang ditentukan berdasarkan pembolehubah persekitaran.

Atas ialah kandungan terperinci Bagaimana untuk Lulus Pembolehubah Bergantung Persekitaran dalam Webpack?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn