1.
Entri menginstruksikan webpack untuk menggunakan file mana sebagai titik awal untuk mulai mengemas, menganalisis, dan membuat grafik ketergantungan internal.
2.
Output menginstruksikan webpack tempat mengeluarkan paket sumber daya dan cara menamainya.
3. Loader
webpack hanya dapat memahami file JavaScript dan JSON, yang merupakan kemampuan bawaan webpack yang langsung tersedia. Loader memungkinkan webpack memproses jenis file lain dan mengubahnya menjadi modul valid yang dapat digunakan oleh aplikasi dan ditambahkan ke grafik ketergantungan.
4.
PluginPlugin dapat digunakan untuk melakukan tugas yang lebih luas. Plug-in berkisar dari optimasi pengemasan dan kompresi hingga mendefinisikan ulang variabel di lingkungan.
5.
Mode mode (Mode) menginstruksikan webpack untuk menggunakan konfigurasi mode yang sesuai.
Mari beri Anda pengenalan mendetail tentang lima konsep inti webpack.
Objek entri digunakan oleh webpack untuk menemukan, memulai, dan membangun bundel. entri adalah titik awal aplikasi. Dari titik awal ini, aplikasi memulai eksekusi. Jika Anda meneruskan sebuah array, setiap item dalam array akan dieksekusi. Titik masuk menunjukkan modul mana yang harus digunakan webpack untuk mulai membuat grafik ketergantungan internalnya. Setelah memasuki titik masuk, webpack akan mengetahui modul dan perpustakaan mana yang bergantung pada titik masuk tersebut (secara langsung dan tidak langsung).
Aturan sederhana: Setiap halaman HTML memiliki titik awal. Aplikasi satu halaman (SPA): satu titik masuk, aplikasi multi halaman (MPA): beberapa titik masuk.
Nilai defaultnya adalah ./src/index.js , tetapi Anda dapat menentukan titik masuk (atau titik) yang berbeda dengan mengonfigurasi atribut entry dalam konfigurasi webpack. Misalnya:
//Entri tunggal--string module.exports = {
entri: './path/to/my/entry/file.js',
};
//Beberapa entri--array module.exports = {
entri: ['./src/index.js', './src/add.js']
};
//Beberapa entri--modul objek.ekspor = {
pintu masuk: {
rumah: './home.js',
tentang: './about.js',
hubungi: './contact.js'
}
}; Jenis nilai entri:
string: entri tunggal, dikemas untuk membentuk potongan, dan pada akhirnya hanya satu file bundel yang akan dihasilkan. Nama default dari potongan tersebut adalah
array utama: multi-entri, semua file entri saja membentuk satu potongan pada akhirnya. Keluarkan file bundel, dan nama potongan defaultnya adalah main. Umumnya hanya digunakan dalam fungsi HMR untuk membuat objek hot update HTML menjadi efektif
: banyak entri, sebanyak potongan sebanyak kuncinya, dan sebanyak file bundel yang dihasilkan, dan setiap kunci (kunci) akan menjadi nama potongan tersebut. Pada tipe objek, nilai setiap kunci juga bisa berupa array, bukan hanya string
output menginstruksikan webpack bagaimana mengeluarkannya dan di mana mengeluarkan bundel, aset, dan paket lain yang Anda kemas atau Apa pun yang dimuat menggunakan webpack . Nilai default dari bundel keluaran adalah ./dist/main.js , dan file lain yang dihasilkan ditempatkan di folder ./dist secara default.
Anda dapat mengonfigurasi proses ini dengan menentukan kolom output di konfigurasi:
//webpack.config.js
const jalur = memerlukan('jalur');
modul.ekspor = {
entri: './path/to/my/entry/file.js',
keluaran: {
jalur: path.resolve(__dirname, 'dist'),
nama file: 'webpack-pertama-saya.bundle.js',
},
}; Kita dapat memberi tahu webpack nama bundel dan di mana bundel tersebut dihasilkan melalui properti output.filename dan output.path .
2.1.output.nama file (nama file dan direktori)
Opsi ini menentukan direktori dan nama setiap bundel keluaran. Bundel ini akan ditulis ke direktori yang ditentukan oleh opsi output.path .
Untuk satu titik入口, nama file akan menjadi nama statis. Namun, saat membuat beberapa bundel melalui beberapa titik masuk, pemisahan kode, atau berbagai plugin, metode lain harus digunakan untuk memberi nama unik pada setiap bundel.
//Entri tunggal:
modul.ekspor = {
//...
keluaran: {
nama file: 'js/bundle.js'
}
};
//Beberapa entri--gunakan nama entri:
modul.ekspor = {
//...
keluaran: {
nama file: '[nama].bundle.js'
}
};
//Beberapa entri - gunakan hash unik untuk menghasilkan module.exports = { di setiap proses pembangunan
//...
keluaran: {
nama file: '[nama].[hash].bundle.js'
}
};
... 2.2. output.path (direktori file)
output.path menentukan direktori semua file keluaran, yang merupakan direktori umum untuk semua keluaran sumber daya di masa mendatang. jalur harus merupakan jalur absolut.
modul.ekspor = {
//...
keluaran: {
jalur: path.resolve(__dirname, 'dist/assets')
}
}; 2.3.output.publicPath (awalan jalur sumber daya yang direferensikan)
publicPath menentukan awalan jalur publik yang diperkenalkan oleh semua sumber daya dalam file html. Ini tidak mempengaruhi jalur file yang dihasilkan. Sebaliknya, ketika file html memasukkan berbagai sumber daya, publicPath ditambahkan sebagai awalan ke jalur sumber daya yang diimpor.
Contoh:
Dalam konfigurasi webpack yang dihasilkan oleh vue-cli, nilai publicPath di lingkungan produksi defaultnya adalah '/', yang merupakan direktori root dari direktori saat ini.
Setelah pengemasan, kita membuka file html dan kita dapat melihat bahwa jalur sumber daya yang dimasukkan dalam file html adalah:
Seperti yang Anda lihat, simbol / ditambahkan di depan jalur. Saat kami membuka browser untuk mengakses file html yang dihasilkan, kami akan menemukan kesalahan. Sumber daya tidak dapat diakses dan laporan 404 dilaporkan.
Ini mungkin sebagai berikut di server, tetapi mungkin ada masalah saat mengaksesnya.
Kita dapat mengubah publicPath menjadi jalur relatif, atau mengomentarinya secara langsung.
2.3.1. Perbedaan antara path dan publicPath.
打包后文件在硬盘中的存储位置，是webpack所有文件的输出的路径，必须是绝对路径。比如：输出的js、图片，HtmlWebpackPlugin生成的html文件等，都会存放在以path为基础的目录下。2.4.output.chunkFilename (nama potongan non-entri)
output.chunkFilename menentukan nama file potongan non-entri. Artinya, selain potongan yang dihasilkan oleh file entri, file potongan yang dihasilkan oleh file lain juga diberi nama.
modul.ekspor = {
//...
keluaran: {
chunkFilename: 'js/[name]_chunk.js' //Nama potongan non-entri}
}; webpack sendiri hanya dapat mengemas file JavaScript dan JSON ( webpack3+和webpack2+ memiliki pemrosesan file JSON bawaan, tetapi webpack1+并不支持， perlu memperkenalkan json-loader ). webpack tersedia di luar kotak. Webpack sendiri tidak mendukung pengemasan jenis file lain, seperti CSS, Vue, dll., namun kita dapat menggunakan berbagai loader agar webpack dapat memproses jenis file tersebut. Loader dapat mengonversi file dari berbagai bahasa (seperti TypeScript) ke JavaScript atau mengonversi gambar sebaris menjadi URL data. Loader bahkan memungkinkan Anda import file CSS langsung ke modul JavaScript!
Dengan menggunakan loader yang berbeda, webpack memiliki kemampuan untuk memanggil skrip atau alat eksternal untuk memproses file dalam format berbeda, seperti menganalisis dan mengonversi scss ke css, atau mengonversi file JS generasi berikutnya (ES6, ES7) ke file JS yang kompatibel dengan browser modern. Untuk pengembangan React, Loader yang sesuai dapat mengonversi file JSX yang digunakan di React menjadi file JS.
Dalam konfigurasi webpack, loader memiliki dua atribut:
atribut test , yang mengidentifikasi file mana yang akan dikonversi.
Atribut use menentukan pemuat mana yang harus digunakan saat melakukan konversi.
include/exclude（可选）： menambahkan file (folder) yang harus diproses secara manual atau memblokir file (folder) yang tidak perlu diproses
query（可选） : memberikan opsi pengaturan tambahan untuk loader
// Contoh: webpack.config
const jalur = memerlukan('jalur');
modul.ekspor = {
keluaran: {
nama file: 'webpack-pertama-saya.bundle.js',
},
modul: {
aturan: [
{ tes: /.txt$/, pemuat: 'pemuat mentah' },
{ test: /.css$/, use: ['style-loader', 'css-loader'] } //Jika Anda menggunakan beberapa loader, sebaiknya gunakan use
],
},
}; Dalam konfigurasi di atas, atribut rules didefinisikan untuk objek modul terpisah, yang berisi dua atribut yang diperlukan: test dan use . Hal ini setara dengan memberi tahu kompiler webpack bahwa ketika ia menemukan jalur yang diurai sebagai '.txt' dalam pernyataan require() / import , gunakan raw-loader untuk mengonversinya sebelum mengemasnya.
Jika Anda menggunakan beberapa loader, Anda harus menggunakan use. Loader dalam array use dijalankan secara berurutan: dari kanan ke kiri, secara berurutan. Misalnya pada file css di atas, css-loader pertama akan mengkompilasi file css ke dalam JS dan memuatnya ke dalam file JS. Kemudian style-loader akan membuat tag style dan memasukkan sumber daya style di JS ke dalam tag head.
3.1. CSS-loader
Webpack menyediakan dua alat untuk memproses style sheet, css-loader dan style-loader . css-loader memungkinkan Anda memasukkan file css menggunakan metode yang mirip dengan import . style-loader menambahkan semua gaya terhitung ke halaman. Kombinasi keduanya memungkinkan Anda menyematkan style sheet ke dalam file JS yang dikemas oleh webpack file dapat dimasukkan ke dalam file JS.
//Install npm install --save-dev style-loader css-loader //Jika versi css-loader terlalu tinggi, kompilasi mungkin salah. Disarankan untuk menurunkan versi seperti [email protected] tersedia
//Gunakan modul.ekspor = {
...
modul: {
aturan: [
{
tes: /(.jsx|.js)$/,
menggunakan: {
pemuat: "babel-loader"
},
kecualikan: /node_modules/
},
{
tes: //.css$/, //Cara memperkenalkan beberapa loader ke file yang sama. Urutan tindakan pemuat adalah pemuat selanjutnya mulai bertindak pertama kali menggunakan: [
{
pemuat: "pemuat gaya"
}, {
pemuat: "pemuat css"
}
]
}
]
}
}; Asumsikan ada file main.css:
body {
latar belakang: hijau;
} Agar webpack dapat menemukan file "main.css", kita import ke "main.js", sebagai berikut:
//main.js
impor Bereaksi dari 'bereaksi';
impor {render} dari 'react-dom';
impor Penyambut dari './Penyapa';
import './main.css';//Gunakan require untuk mengimpor file css render(<Greeter />, document.getElementById('root')); Biasanya, css akan dikemas ke dalam file yang sama dengan js, bukan Will dikemas sebagai file css terpisah. Namun, dengan konfigurasi yang sesuai, webpack juga dapat mengemas css ke dalam file terpisah.
digunakan untuk mengonversi jenis modul tertentu, sedangkan plug-in dapat digunakan untuk melakukan tugas yang lebih luas, termasuk: pengoptimalan pengemasan, kompresi, manajemen sumber daya, memasukkan variabel lingkungan, dll. Tujuan dari plugin ini adalah untuk menyelesaikan hal-hal lain yang tidak dapat dicapai oleh loader.
Untuk menggunakan plugin, kita perlu menginstalnya melalui npm dan kemudian menambahkan instance plugin di bawah properti plugins. Karena plugin dapat membawa parameter/opsi, Anda harus meneruskan instance new ke properti plugins di konfigurasi webpack. Kebanyakan plugin dapat dikustomisasi melalui opsi, dan Anda dapat menggunakan plugin yang sama beberapa kali untuk tujuan berbeda dalam file konfigurasi.
//webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); // Instal melalui npm const webpack = require('webpack'); // Digunakan untuk mengakses plug-in bawaan module.exports = {
modul: {
aturan: [{ tes: /.txt$/, gunakan: 'pemuat mentah' }],
},
plugin: [HtmlWebpackPlugin baru({ templat: './src/index.html' })],
}; Dalam contoh di atas, html-webpack-plugin menghasilkan file HTML untuk aplikasi dan secara otomatis memasukkan semua bundel yang dihasilkan.
4.1. Plugin BannerPlugin (menambahkan pernyataan hak cipta)
Di bawah ini kami telah menambahkan plugin yang menambahkan pernyataan hak cipta ke kode paket. Plug-in ini adalah plug-in bawaan di webpack dan tidak perlu diinstal.
const webpack = memerlukan('webpack');
modul.ekspor = {
...
modul: {
aturan: [
{
tes: /(.jsx|.js)$/,
menggunakan: {
pemuat: "babel-loader"
},
kecualikan: /node_modules/
},
{
tes: //.css$/,
menggunakan: [
{
pemuat: "pemuat gaya"
}, {
pemuat: "pemuat css",
pilihan: {
modul: benar
}
}, {
pemuat: "pemuat postcss"
}
]
}
]
},
plugin: [
webpack baru.BannerPlugin('Wenxuehai Semua Hak Dilindungi Undang-undang, Segala Reproduksi Akan Diselidiki')
],
}; 4.2. Plug-in Penggantian Modul Panas (pemuatan panas)
Hot Module Replacement (HMR) adalah plug-in yang sangat berguna di webpack. Ini memungkinkan Anda untuk secara otomatis menyegarkan dan melihat pratinjau efek yang dimodifikasi secara real-time setelah memodifikasi kode komponen. Hot loading berbeda dengan webpack-dev-server. Saat aplikasi sedang berjalan, hot replacement dapat melihat efek pembaruan kode tanpa menyegarkan halaman, seperti memodifikasi gaya dom langsung di browser, sedangkan webpack-dev-server memerlukan Refresh halaman.
(1) Tambahkan plug-in HMR ke file konfigurasi webpack;
(2) Tambahkan parameter "hot" ke Webpack Dev Server;
4.2.1. React mengimplementasikan hot loading
. Modul React dapat menggunakan Babel untuk mengimplementasikan fungsi hot loading . Babel memiliki plug-in bernama react-transform-hrm , yang memungkinkan HMR bekerja dengan baik tanpa konfigurasi tambahan modul React;
install react-transform-hmr
npm install --save-dev babel-plugin-react-transform react -transform -hmr
const webpack = memerlukan('webpack');
modul.ekspor = {
entri: __dirname + "/app/main.js",//Satu-satunya file entri yang telah disebutkan berkali-kali keluaran: {
jalur: __dirname + "/ publik",
nama file: "bundle.js"
},
devtool: 'peta-sumber-eval',
server pengembang: {
contentBase: "./public",//Direktori tempat halaman dimuat oleh server lokal berada historyApiFallback: true,//Jangan lompat inline: true,
panas: benar
},
modul: {
aturan: [
{
tes: /(.jsx|.js)$/,
menggunakan: {
pemuat: "babel-loader"
},
kecualikan: /node_modules/
},
{
tes: //.css$/,
menggunakan: [
{
pemuat: "pemuat gaya"
}, {
pemuat: "pemuat css",
pilihan: {
modul: benar
}
}, {
pemuat: "pemuat postcss"
}
]
}
]
},
plugin: [
webpack baru.BannerPlugin('Hak Cipta, reproduksi apa pun akan diselidiki'),
webpack.HotModuleReplacementPlugin() baru //Plugin muat ulang panas],
}; Konfigurasikan Babel
// .babelrc
{
"preset": ["reaksi", "env"],
"env": {
"perkembangan": {
"plugin": [["reaksi-transformasi", {
"mengubah": [{
"transformasi": "reaksi-transformasi-hmr",
"impor": ["bereaksi"],
"lokal": ["modul"]
}]
}]]
}
}
} //Penyambut,js
impor Bereaksi, {
Komponen
} dari 'bereaksi'
impor gaya dari './main.css'
class Greeter memperluas Komponen {
memberikan() {
kembali (
<div>
<h1>
aaaf
</h1>
</div>
);
}
}
ekspor penyambut default //main.js
impor Bereaksi dari 'bereaksi';
impor {
memberikan
} dari 'reaksi-dom';
impor Penyambut dari './greeter.js';
render( < Greeter / > , document.getElementById('root')); Sekarang jika kita dapat mengimplementasikan modul pemuatan panas, kita dapat melihat konten yang diperbarui langsung di browser setiap kali kita menyimpan, dan browser tidak perlu menyegarkan. Menyegarkan secara otomatis.
(Terkadang tidak ada efek, mungkin masalah versi)
4.3. Plugin ExtractTextWebpackPlugin (mengekstraksi css).
Secara default, webpack tidak akan memperlakukan gaya css sebagai file independen, tetapi juga akan mengemas css menjadi file js. dan paket yang dihasilkan Ketika file js dirender, gaya akan dimasukkan ke dalam halaman dalam bentuk tag gaya melalui sintaks js. Namun dalam kasus ini, file bundel yang dikemas mungkin terlalu besar. Saat ini, kita dapat menggunakan plug-in ExtractTextWebpackPlugin untuk memisahkan gaya css menjadi file css.
Plug-in ExtractTextWebpackPlugin akan memindahkan *.css yang direferensikan dalam potongan entri (termasuk file css yang diimpor dan gaya yang ditulis dalam file vue) ke file CSS yang independen dan terpisah. ExtractTextPlugin akan menghasilkan file css yang sesuai untuk setiap potongan entri, yang berarti bahwa satu entri terkait dengan file css, masing-masing akan menghasilkan beberapa file css yang sesuai.
Dengan plugin ExtractTextWebpackPlugin, gaya Anda tidak lagi tertanam dalam bundel JS, tetapi akan ditempatkan dalam file CSS terpisah (yaitu styles.css ). Jika file gaya Anda berukuran lebih besar, ini akan membuat pemuatan awal lebih cepat karena bundel CSS akan dimuat secara paralel dengan bundel JS.
const ExtractTextPlugin = memerlukan("ekstrak-teks-webpack-plugin");
modul.ekspor = {
modul: {
aturan: [
{
tes: //.css$/,
gunakan: ExtractTextPlugin.extract({
fallback: "pemuat gaya",
gunakan: "pemuat css"
})
}
]
},
plugin: [
EkstrakTeksPlugin baru({
nama file: utils.assetsPath('css/[name].[contenthash].css'), //ExtractTextPlugin menghasilkan file yang sesuai untuk setiap potongan entri, jadi ketika Anda mengonfigurasi beberapa potongan entri, Anda harus menggunakan [ nama], [id ] atau [hash konten]
// allChunks: true, // Saat menggunakan `CommonsChunkPlugin` dan ada potongan yang diekstraksi (dari `ExtractTextPlugin.extract`) di potongan umum, `allChunks` ** harus disetel ke `true`.
}),
]
} 4.3.1. opsi allChunks (apakah akan mengekstrak gaya yang dimuat secara asinkron bersama-sama)
Nilai default opsi allChunks pada plugin ExtractTextWebpackPlugin adalah salah.
Opsi allChunks berarti apakah gaya yang dimuat secara asinkron perlu diekstraksi bersama-sama. Karena secara default, meskipun plugin ExtractTextWebpackPlugin digunakan, jika gaya atau file gaya dimuat secara asinkron, gaya ini tidak akan diekstraksi menjadi file css independen, tetapi akan tetap dikemas ke dalam file js.
Oleh karena itu, allChunks:false adalah nilai default. Nilai defaultnya adalah mengekstrak kode dari entri, tetapi kode yang dimuat secara asinkron tidak akan diekstraksi; allChunks:true adalah mengekstrak kode semua modul (termasuk modul yang dimuat secara asinkron). sebuah file. Jika pemuatan gaya asinkron digunakan, tetapi allChunks disetel ke false, maka kita perlu menyetel fallback dari ExtractTextPlugin.extract. fallback adalah menggunakan style-loader untuk memuat secara asinkron ketika kode css yang dimuat oleh kode asinkron tidak. diekstraksi. Gaya komponen.
Silakan merujuk ke:
https://github.com/sevenCon/blog-github/blob/master/articles/webpack catatan studi (2)-Penggunaan ExtractTextWebpackPlugin.md
https://blog.csdn.net/weixin_41134409/article/ detail /88416356
Dengan memilih salah satu development , production , atau none untuk mengatur parameter mode , Anda dapat mengaktifkan pengoptimalan bawaan webpack di lingkungan yang sesuai. Nilai defaultnya adalah production .
modul.ekspor = {
mode: 'produksi',
}; Mengonfigurasi opsi mode secara langsung di file konfigurasi akan memberi tahu webpack untuk menggunakan pengoptimalan bawaan dari mode terkait. Opsi mode mencakup pengembangan, produksi, dan tidak ada.
pengembangan: mode pengembangan, kode yang dikemas tidak akan dikompresi, dan debugging kode diaktifkan.
produksi: mode produksi, justru sebaliknya.
Atur mode ke pengembangan atau produksi, dan webpack akan secara otomatis menetapkan nilai process.env.NODE_ENV. Kita bisa mendapatkan nilai ini langsung di folder mana pun. Namun jika Anda hanya menyetel NODE_ENV , mode tidak akan disetel secara otomatis. (Dalam node, variabel global proses mewakili proses node saat ini. Atribut process.env berisi informasi lingkungan pengguna. Atribut NODE_ENV tidak ada di process.env itu sendiri. Biasanya kita mendefinisikan sendiri atribut NODE_ENV dan menggunakannya untuk Menentukan apakah itu adalah lingkungan produksi atau lingkungan pengembangan)
(Harap diperhatikan: opsi mode baru di webpack4. Sebelum versi 4, opsi ini disetel dengan plug-in DefinePlugin. Webpack4 menghapus DefinePlugin)
5.1 dijelaskan secara rinci
di webpack. Umumnya, Nilai NODE_ENV akan dikonfigurasi di file konfigurasi. Pada proyek vue yang dibuat secara default menggunakan vue-cli, konfigurasi NODE_ENV adalah sebagai berikut:
//Di bawah file webpack.dev.conf.js, file dev.env.js dimasukkan new webpack.DefinePlugin({
'proses.env': memerlukan('../config/dev.env')
}), //module.exports = merge(prodEnv, { dalam file dev.env.js
NODE_ENV: '"pengembangan"'
}) // Di bawah file webpack.prod.conf.js, file prod.env.js diperkenalkan const env = require('../config/prod.env')
webpack baru.DefinePlugin({
'proses.env': env
}), //module.exports = { dalam file prod.env.js
NODE_ENV: '"produksi"'
} Seperti yang Anda lihat di atas, di lingkungan pengembangan, file konfigurasi mengonfigurasi NODE_ENV menjadi 'pengembangan'; di lingkungan produksi, file konfigurasi mengonfigurasi NODE_ENV menjadi 'produksi'.
Saat kita menjalankan proyek, kita akan menjalankan npm run dev atau npm run build. Kedua perintah ini menggunakan file konfigurasi lingkungan pengembangan atau lingkungan produksi untuk menghasilkan proyek yang sedang berjalan, dan karenanya mengonfigurasi nilai NODE_ENV yang sesuai. nilai NODE_ENV yang sesuai dapat diperoleh di file proyek mana pun (belum tentu file konfigurasi, karena bergantung pada apakah file konfigurasi yang dikonfigurasi dengan nilai NODE_ENV telah berlaku).
5.2. Proses konfigurasi Process.env.NODE_ENV
adalah variabel global node, dan proses memiliki atribut env, tetapi tidak memiliki atribut NODE_ENV. Variabel NODE_ENV tidak tersedia secara langsung di process.env, tetapi diperoleh dengan mengaturnya. Namun, variabel NODE_ENV biasanya digunakan untuk menentukan tipe lingkungan. Fungsi dari variabel ini adalah: kita dapat membedakan lingkungan pengembangan atau lingkungan produksi dengan menilai variabel ini.
(1) Nilai variabel global dapat diatur melalui plugin bawaan webpack DefinePlugin:
new webpack.DefinePlugin({
'proses.env.NODE_ENV': JSON.stringify('produksi')
}), setelah disetel, Anda bisa mendapatkan nilai ini di skrip eksekusi, misalnya:
// main.js console.log(process.env.NODE_ENV); //produksi
tetapi nilai ini tidak dapat diperoleh di file konfigurasi webpack webpack.config.js.
(2) Pertama unduh paket cross-env melalui
pengaturan paket cross-env:
cnpm i cross-env -D
Atur file package.json:
"build": "cross-env NODE_ENV=test webpack --config webpack.config .js"
Saat ini, nilai (process.env.NODE_ENV) dapat diperoleh di file konfigurasi, tetapi tidak dapat diperoleh di skrip yang dapat dieksekusi. Nilai tersebut harus digunakan dengan plug-in DefinePlugin.