6. webpack.DefinePlugin插件学习

最新推荐文章于 2024-04-26 00:38:11 发布

胖鹅68

最新推荐文章于 2024-04-26 00:38:11 发布

阅读量713

点赞数

分类专栏： webpack、 esline 、代码规范

本文链接：https://blog.csdn.net/hbiao68/article/details/104054953

版权

webpack、 esline 、代码规范专栏收录该内容

32 篇文章 2 订阅

订阅专栏

文章目录

DefinePlugin 介绍

DefinePlugin 允许创建一个在编译时可以配置的全局常量。

注意：定义在全局有用，并不是说变量是在window下面

使用场景例子

对开发环境和生产环境使用不同的配置非常有用。如在开发环境中输出日志，在生产环境中不输出日志。这就是 DefinePlugin 的用处，设置它，就可以忘记开发和发布构建的规则。

使用规则

每个传进 DefinePlugin 的键值都是一个标志符或者多个用 . 连接起来的标志符。
如果这个值是一个字符串，它会被当作一个代码片段来使用。
如果这个值不是字符串，它会被转化为字符串(包括函数)。
如果这个值是一个对象，它所有的 key 会被同样的方式定义。
如果在一个 key 前面加了 typeof,它会被定义为 typeof 调用。

定义字符串的解决办法

因为这个插件直接执行文本替换，给定的值必须包含字符串本身内的实际引号。通常，有两种方式来达到这个效果

使用双引号里面嵌套单引号，例如：’“production”’
或者使用 JSON.stringify(‘production’)

定义全局变量

new webpack.DefinePlugin({
	author: "'huangbiao'",
	project: "'webpack-study'",
	'window.date': "'20200120'",
	VERSION: JSON.stringify("5fa3b9")
}),

测试js 代码

// 通过webpack.DefinePlugin 插件，添加全局变量
console.log("author", author);
console.log("window.author", window.author);
console.log("project", project);
console.log("VERSION", VERSION);
console.log("window.date", window.date);


function parent () {
    document.getElementsByTagName("body")[0].innerHTML = "第一个webpack程序<br/>我改变了内容1"
}

export default parent;

结果

parent.js:3 author huangbiao
17:09:03.968 parent.js:4 window.author undefined
17:09:03.968 parent.js:5 project webpack-study
17:09:03.969 parent.js:6 VERSION 5fa3b9
17:09:03.969 parent.js:7 window.date 20200120