webpack配置中环境变量-process.env. NODE_ENV

背景

  webpack有一特性就是可以让使用者灵活的在不同环境(开发环境,生产环境等)进行相应的特性的策略打包,比如: 是否使用反向代理使用接口,针对不同的静态资源(如图片等)是直接拷贝还是进行打包编译等等,这一特性的诞生归功于Nodejs的环境变量-process.env. NODE_ENV

process.env. NODE_ENV

  1. 值

    1.1  production:生产阶段

    1.2 development/staging: 开发阶段

  2. webpack中的应用

    // webpack.config.js     module.exports = {       // webpack的mode(模式参数):不同模式下进行不同的内置优化       mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'     }   3. 使用     3.1 这个变量在具体的应用的时候是需要对当前的环境变量进行设置的,一般情况会在进行执行不同命令的时候去设置       3.2 由于这个变量针对于不同的系统设置方式不一样,如设置为开发模式的话,       window系统: set NODE_ENV=development         mac系统: export NODE_ENV=development       3.3 鉴于兼容性和使用上的问题,就有人开发了cross-env        3.3.1 这是一个跨平台的第三方的包,使用的时候需要安装下,npm i --save-dev cross-env        3.3.2 设置环境变量: cross-env NODE_ENV=development即可   故此:      // package.json     {       "scripts": {         // 设置为开发环境并且按照webpack.dev.js的配置进行打包部署         "dev": "cross-env NODE_ENV=development webpack-dev-server --config ./scripts/webpack.dev.js"       }     }         上述只是讲解了一个大概的思路和对应的小例子,请大家根据自己具体的项目进行特殊配置。          如有不严谨和错误地方请希望指正,祝大家工作顺利 ! 
上一篇:菜鸟看前端(vue项目多环境配置)


下一篇:Java SE Development Kit8安装过程