這是一篇webpack4配置的系列文章，推薦從頭開(kāi)始看起
1.初始化
2.關(guān)于執(zhí)行環(huán)境process.env.NODE_ENV
3.設(shè)置mode和sourceMap
4.加載css, scss文件，以及樣式抽離
5.加載圖片等文件
6.html-webpack-plugin插件
7.單vue文件的加載，以及babel的使用
8.配置devServer服務(wù)器，熱更新，前端跨域代理
9.設(shè)置目錄別名
10.css樣式前綴自動(dòng)補(bǔ)全
11.public公共靜態(tài)資源目錄拷貝
12.清理dist目錄

在第1節(jié)中，我們初始化配置的package.json文件如下

{
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "private": true,
    "scripts": {
         "build": " webpack --config webpack.config.js --mode production"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {},
    "dependencies": {}
}

在scripts下我們配置了build指令： " webpack --config webpack.config.js --mode production"。

--config參數(shù)指明了webpack使用的配置文件路徑。

--mode指明了執(zhí)行的環(huán)境（默認(rèn)為production），也就是process.env.NODE_ENV的值。

但是要注意這里配置的環(huán)境只能在入口文件main.js和其引用的模塊中訪問(wèn)，webpack.config.js文件無(wú)法訪問(wèn)。

為了在webpack.config.js中也指明process.env.NODE_ENV，同時(shí)兼容不同的系統(tǒng)，我們做如下設(shè)置。

安裝cross-env

npm install --save-dev cross-env

build指令做一些修改，最終如下所示

{
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "private": true,
    "scripts": {
         "build":"cross-env NODE_ENV=production webpack --config webpack.config.js --mode production"
     },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {},
    "dependencies": {}
}