webpack和项目 配置环境变量

目录

介绍

1. 方案1 

1.1 webpack中环境变量配置

1.2 .env 文件

2 方案2

3方案3 

---

介绍

• package.json中 --mode 配置的值在浏览器环境中读到
• package.json中 --env 配置的值能在node环境中读到

 平时开发要区分环境，js中和webpack中都需要读到环境变量配置，下面大概介绍下如何配置

1. 方案1 

1.1 webpack中环境变量配置

package.json 文件

"scripts": {
    "serve": "webpack NODE_ENV=development",
  }

• 在webpack中process.env.NODE_ENV可以读到development

1.2 .env 文件

！！！注意：使用.env文件，需要安装 dotenv-webpack 依赖, 在webpack插件中使用，会根据配置的 --mode 自动加载.env.xx文件

.env.development文件

mode=development

• 项目中js文件 可以用 process.env.NODE_ENV读到.env文件配置的 development

2 方案2

直接在package.json文件中全配置

"scripts": {
  "start": "cross-env NODE_ENV='development' --mode development",
}

3方案3 

package.json配置env, 然后webpack DefinePlugin插件配置全局变量让js获取变量

package.json文件

"scripts": {
  "dev": "cross-env NODE_ENV='development'"
}

webpack.config.js文件 

const path = require('path');
const webpack = require('webpack');

module.exports =  {
  	plugins:[
           new webpack.DefinePlugin({
                // 注意：如果和package.json中 --mode 同名的 key，这里的值会覆盖mode配置的值
               	'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
           }),
        ],
    		...
};