webpack和项目 配置环境变量

Posted 2022-12-30 哈娄

目录

介绍

1. 方案1 

1.1 webpack中环境变量配置

1.2 .env 文件

2 方案2

3方案3 

---

介绍

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

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

1. 方案1 

1.1 webpack中环境变量配置

package.json 文件

"scripts": 
    "serve": "webpack --mode=development",
  

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

1.2 .env 文件

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

.env.development文件

NODE_ENV=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),
           ),
        ],
    		...
;