webpack实例解析五（用.env.development设置环境变量）

旧城等待， 2021-10-01 03:44 2130阅读 0赞

原理：  
1，利用node的fs模块读取文件处理成对象  
2，用webpack.DefinePlugin插件，设置process.env

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70]  
readEnv.js

.env.development

![在这里插入图片描述][20190813184500989.jpg]  
webpack.dev.conf.js改动

const readEnv = require('./readEnv')
    const env = readEnv('../.env.development')
    ...
      plugins: [
        new webpack.DefinePlugin({ // 定义环境和变量
          'process.env': {
            NODE_ENV: "'development'",
            ...env
          }
        })
      ]

index.js改动

console.log(process.env, '环境变量')

效果  
打包后生产环境：  
![在这里插入图片描述][20190813184650966.jpg]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70]: /images/20210812/10b6841c5d7245df956b029280d9e7fb.png
[20190813184500989.jpg]: /images/20210812/cac88f89ffbe4a3989ec6953aafefb16.png
[20190813184650966.jpg]: /images/20210812/21825bf5069c4b6cb317e408eb1764dc.png