DefinePlugin
DefinePlugin
允许创建一个在编译时可以配置的全局常量。这可能会对开发模式和发布模式的构建允许不同的行为非常有用。如果在开发构建中,而不在发布构建中执行日志记录,则可以使用全局常量来决定是否记录日志。这就是 DefinePlugin
的用处,设置它,就可以忘记开发和发布构建的规则。
new webpack.DefinePlugin({ // Definitions... })
用法
每个传进 DefinePlugin
的键值都是一个标志符或者多个用 .
连接起来的标志符。
- 如果这个值是一个字符串,它会被当作一个代码片段来使用。
- 如果这个值不是字符串,它会被转化为字符串(包括函数)。
- 如果这个值是一个对象,它所有的 key 会被同样的方式定义。
- 如果在一个 key 前面加了
typeof
,它会被定义为 typeof 调用。
这些值会被内联进那些允许传一个代码压缩参数的代码中,从而减少冗余的条件判断。
new webpack.DefinePlugin({ PRODUCTION: JSON.stringify(true), VERSION: JSON.stringify("5fa3b9"), BROWSER_SUPPORTS_HTML5: true, TWO: "1+1", "typeof window": JSON.stringify("object") })
console.log("Running App version " + VERSION); if(!BROWSER_SUPPORTS_HTML5) require("html5shiv");
注意,因为这个插件直接执行文本替换,给定的值必须包含字符串本身内的实际引号。通常,有两种方式来达到这个效果,使用 '"production"'
, 或者使用 JSON.stringify('production')
。
分析
1、官网中说的“可以使用这个插件定义一些编译时的全局常量”
官网说的编译的意思就是,webpack会根据配置文件将将入口文件解析、打包、转译为浏览器可识别的js文件最后输出到出口
2、官网中说的“插件会直接替换文本”
在编译过程中(转译为浏览器可识别的js文件时),会将源文件中所有用到DefinePlugin中定义的常量的地方直接替换为对应的值文本,注意,是文本无论语义上是对象还是字符串还是函数,都直接作为文本替换过去。
例一:
new webpack.DefinePlugin({ PRODUCTION: 'this is production', })
xx.js引用
console.log(PRODUCTION)
会转译成
console.log(this is production)
例二:
new webpack.DefinePlugin({ 'process.env.info': JSON.stringify({ production:'dev', version:1.0 })
xx.js引用
console.log(process.env.info)
最后转译成
console.log({ production:'dev', version:1.0 })
例三:
new webpack.DefinePlugin({ 'process.env.info': JSON.stringify({ production:'dev', version:1.0 })
xx.js引用
console.log(process.env.info) console.log(process.env)
最后转译成
console.log({ production:'dev', version:1.0 }) console.log(process.env)
由上可知,在编译生成新js文件时,将process.env.info常量直接替换成了他对应的值文本,而process.env没有被替换,因为没有在DefinePlugin中定义process.env
编译后的js中process.env指向的是Node中的process,而DefinePlugin定义的process.env.info和Node的process没有任何关系,他只是一个在插件中定义的编译时的常量,只是恰好常量的名字是process.env.info,编译后就已经被替换了。
文章借鉴了:https://blog.csdn.net/wushuitaolove/article/details/103044772