zoukankan      html  css  js  c++  java
  • DefinePlugin插件

    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

  • 相关阅读:
    UOJ #455 [UER #8]雪灾与外卖 (贪心、模拟费用流)
    Codeforces 482E ELCA (LCT)
    Codeforces 798D Mike and distribution (构造)
    AtCoder AGC017C Snuke and Spells
    HDU 6089 Rikka with Terrorist (线段树)
    HDU 6136 Death Podracing (堆)
    AtCoder AGC032D Rotation Sort (DP)
    jenkins+python+kubectl实现批量更新k8s镜像
    Linux 下载最新kubectl版本的命令:
    jenkins X 和k8s CI/CD
  • 原文地址:https://www.cnblogs.com/wmydb/p/13265274.html
Copyright © 2011-2022 走看看