webpack4配置vue项目----2.关于执行环境proce

这是一篇webpack4配置的系列文章，推荐从头开始看起
1.初始化
2.关于执行环境process.env.NODE_ENV
3.设置mode和sourceMap
4.加载css, scss文件，以及样式抽离
5.加载图片等文件
6.html-webpack-plugin插件
7.单vue文件的加载，以及babel的使用
8.配置devServer服务器，热更新，前端跨域代理
9.设置目录别名
10.css样式前缀自动补全
11.public公共静态资源目录拷贝
12.清理dist目录

在第1节中，我们初始化配置的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参数指明了webpack使用的配置文件路径。

--mode指明了执行的环境（默认为production），也就是process.env.NODE_ENV的值。

但是要注意这里配置的环境只能在入口文件main.js和其引用的模块中访问，webpack.config.js文件无法访问。

为了在webpack.config.js中也指明process.env.NODE_ENV，同时兼容不同的系统，我们做如下设置。

安装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": {}
}