webpack 里面 definePlugin 里面定义了一些 process.env 的变量，这个是如何应用到 runtime 环境的？

[yazoox]

我的理解，webpack 是个打包工具，是在 compile 阶段。 打包好以后，把 bundle 部署到服务器上，比如 aws 上面，运行后，是怎么应用这些 process.env 的？

是 webpack 打包时，把 process.env 生成了一个文件，然后在 runtime 再把这些 variables 从文件里面读取出来了么？

我 google 了一下，找相关文档，没有找到。

[Mutoo]

直接把整个 process.env.var 替换（硬编码）成你指定的字面量，正如它的名字 #define 一样。

[Mutoo]

文档 https://webpack.js.org/plugins/define-plugin/

[murmur]

不同的框架不一样，vue 只替换 process.env.vue_app_xxxx 的变量

[yazoox]

@Mutoo 但我们的代码是 runtime 运行的
比如
export function getVersion() {
return process.env.VERSION as string;
}

你的意思是，webpack 在 compile 的时候，会直接把这里的 process.env.VERSION 替换掉么？
谢谢

[otakustay]

你自己用了 DefinePlugin 的话，就是你定义的 key 字面量替换的，你上面的代码，在 VERSION=1.2.3 ，且用了 new DefinePlugin({'process.env.VERSION': JSON.stringify(process.env.VERSION)})的情况下，就会被编译成 return '1.2.3'
所以你必须原样写 process.env.VERSION ，不能 process.env[CONST_VERSION]之类的动态写法

[zqx]

打包的时候，替换了你的代码
浏览器执行的时候已经不是 process.env 了

[SoloCompany]

你应该配合 treeshaking 一起理解

[Biwood]

@yazoox 正解，就是替换字符串

[wyhooo]

硬核替换，没别的技巧。

[mxT52CRuqR6o5]

你写个简单点的 case 自己看一下编译结果就明白了

[mxT52CRuqR6o5]

https://webpack.js.org/plugins/define-plugin/#root

The DefinePlugin replaces variables in your code with other values or expressions at compile time.

看到 replace 了吗

[mxT52CRuqR6o5]

必须是 compile time 的硬核替换，不然没法把条件为 false 的分支代码 drop 掉

[mxT52CRuqR6o5]

当然也许 development 环境可以做一些动态注入之类的方案（在全局声明个 process 变量），可以更快的编译