webpack环境变量在项目中的使用

前言

参加过工作的小伙伴都会知道，我们的项目一般都是分为几个环境，然后慢慢的提交申请合并代码到master分支。对于不同的环境，我们请求地址都是不一样的，还有一些配置的参数也可能不一样。我们也不能换一个环境就去改动我们的代码，出错率和麻烦程度太高了，而环境变量就是来解决这一问题的。公司项目的根目录下一般都有.env开头的配置文件，这里边放着就是环境变量。根据我们打包的命令来决定环境变量的值。

webpack环境变量的使用

设置环境

随便创建一个webpack项目的demo。打开package.json来配置我们的命令

{
  "name": "123",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "serve": "npx webpack server --node-env development",
    "build": "npx webpack -c ./webpack.config.js --node-env production"
  },
  "devDependencies": {
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  },
  "dependencies": {
    "dotenv": "^16.0.3"
  }
}

对于scripts中的命令我们可以来解析一下

• npx webpack server这里是使用webpack-dev-server插件配置了一下开发服务器；
• npx webpack -c ./webpack.config.jswebpack正常的打包命令；
• --node-env production作用如下，我们要知道webpack.config.js这个文件运行环境是在node环境下，process是node环境下的一个全局变量，所以我们在webpack.config.js文件中是可以访问到process的

我们可以运行一下build命令

确实process.env.NODE_ENV等于production 那么我们就可以配置多个环境的打包命令，比如设置命令dev的process.env.NODE_ENV为development；设置命令test的process.env.NODE_ENV为test。

配置对应环境的.env文件

通常情况下开发环境对应.env文件，测试环境对应.env.test文件,生产环境对应.env.production文件。目录下创建两个文件

文件里面的内容形式为

XXX=XXX
XXX=XXX

读取对应配置文件中的环境变量

打包时环境知道了，配置环境变量的文件我们也知道，接下来就是这么读取环境对应配置文件中的环境变量。这里我们使用一个库-dotenv。dotenv库默认是读取.env文件加载到 process.env中，我们可以通过配置他的path参数来改变读取文件地址。

const path = require("path")

let envPath = path.resolve(__dirname, `.env.${process.env.NODE_ENV}`);
let dotenvConfig = require('dotenv').config({
  path: fs.existsSync(envPath)
    ? envPath
    : path.resolve(path.resolve(__dirname, '.env')),
})

完整的如下

const path = require("path")
const fs = require('fs')
const webpack = require('webpack')
const HtmlWebpackPlugin = require("html-webpack-plugin")

/** 配置读取环境变量文件路径 加载.env*文件  默认加载.env文件*/
let envPath = path.resolve(__dirname, `.env.${process.env.NODE_ENV}`);
let dotenvConfig = require('dotenv').config({
  path: fs.existsSync(envPath)
    ? envPath
    : path.resolve(path.resolve(__dirname, '.env')),
})

/** @type {import('webpack'.Configuration)} */
module.exports = (env) => {
  console.log(process.env, '123123');
  return {
    entry: './src/index.js',
    output: {
      clean: true
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: "./index.html",
        filename: "index.html",
        inject: "body",
      }),
    ],
    devServer: {
      static: path.resolve(__dirname, 'dist'),
      compress: true,
      open: true,
      watchFiles: ["./src/"],
      port: 3000,
      host: '127.0.0.1',
    }
  }
}

这时候分别执行serve和build命令

客户端获取环境变量

这个就简单了,使用webpack的DefinePlugin插件就行了。

    plugins: [
     //.....
      //浏览器环境变量
      new webpack.DefinePlugin({
        BASE_URL: JSON.stringify(process.env.BASE_URL)
      })
      //.....
    ],

使用serve命令试一下，成功输出

结尾

使用环境变量思路大致就是这样，上面只是一个简单的demo，不懂的可以去试试，不懂webpack的也可以去学学，还是很有用的。