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

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

readEnv.js

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

// 读取环境变量的文件把它转化成对象

module.exports = (file) => { // flie为文件路径
  let fileName = path.join(__dirname, file);
  let data = fs.readFileSync(fileName, { encoding: 'utf8' })
  let d = data.replace(/\r/g, ',').replace(/\n/g, '') // 把换行和回车替换
  let arr = d.split(',').map(item => {
    return item.split('=')
  }) // [ [ 'a', '1' ], [ 'b', '2' ] ]
  let obj = {}
  arr.forEach(item => {
    obj[item[0]] = item[1]
  })
  return obj //{ a: '1', b: '2' }
  // 可以接着处理
  /* 像vue-cli3 新版create-react-app 一样规定环境变量的Key必须以(VUE_APP_)  (REACT_APP_) 开头 */
}

.env.development

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, '环境变量')

效果
打包后生产环境：