webpack 注入变量

背景

在脚手架项目中，我们经常能看到前端利用process.env.NODE_ENV来判断当前处于dev还是product环境，但其实process是node中独有的对象，那么如何在前端判断当前环境呢。

实现

首先在package.json需要配置环境变量

  "scripts": {
   
    "dev": "node webpack.js dev",
  },

我们在运行的时候输入的是npm run dev。 那么在node中，我们读取一下process并打印。可以发现是一个数组，并且和"node webpack.js dev"时对应的,node表示node环境路径, webpack表示webpck配置文件路径，dev就是我们自定义的了。在webpack配置中我们就可以利用process.argv[2]获取dev常量。

[
	"C:\Program Files\nodejs\node.exe",
	"E:\Auth\lexus_oa_dev\htdocs\webpack.js",
	"dev"
]

在webpack.config.js中就可以利用DefinePlugin插件来将该变量注入到打包的bundle.js文件中(本地热更新时的构建文件)。这样在前端js文件中就可以读取到该变量了

    plugins: [
        new webpack