Bagaimana untuk Lulus Pembolehubah Bergantung Persekitaran dalam 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!