作者:水涛

座右铭:天行健,君子以自强不息

自白:我写博文上来蹭蹭就是干,我突然觉得我需要幽默一点了,好了,下面我们说正经的

一、官方定义:

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'),
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
});
console.log('Running App version ' + VERSION);
if(!BROWSER_SUPPORTS_HTML5) require('html5shiv');

When defining values for process prefer 'process.env.NODE_ENV': JSON.stringify('production')over process: { env: { NODE_ENV: JSON.stringify('production') } }. Using the latter will overwrite the process object which can break compatibility with some modules that expect other values on the process object to be defined.

注意,因为这个插件直接执行文本替换,给定的值必须包含字符串本身内的实际引号。通常,有两种方式来达到这个效果,使用 '"production"', 或者使用 JSON.stringify('production')

二、个人分析

1、官网中说的“可以使用这个插件定义一些编译时的全局常量”

编译时这几个字很重要,webpack会根据配置文件将将入口文件解析、打包、转译为浏览器可识别的js文件最后输出到出口,而他转译的过程其实就是webpack编译过程,也就是官网说的编译时。

2、官网中说的“插件会直接替换文本”

> 在编译过程中(转译为浏览器可识别的js文件时),会将源文件中所有用到DefinePlugin中定义的常量的地方直接替换为对应的值文本,注意,是文本无论语义上是对象还是字符串还是函数,都直接作为文本替换过去。

示例1:

假设在配置文件中定义编译时全局常量 process.env.firstName

new webpack.DefinePlugin({
'process.env.firstName': JSON.stringify("ShuiTao")
});

源文件index.js内容如下

console.log(process.env.firstName)

最终转译后的js文件

console.log('ShuiTao')

可以看到,在编译生成新js文件时,将process.env.firstName常量直接替换成了他对应的值文

示例2:

假设在配置文件中定义编译时全局常量 process.env.info

new webpack.DefinePlugin({ 'process.env.info': JSON.stringify({
name:'ShuiTao',
  age:23
}) });

源文件index.js内容如下

console.log(process.env.info)

最终转译后的js文件

console.log({
      name:'ShuiTao',
      age:23
})

可以看到,在编译生成新js文件时,将process.env.info常量直接替换成了他对应的值文本

示例3:

假设在配置文件中定义编译时全局常量 process.env.info

new webpack.DefinePlugin({ 'process.env.info': JSON.stringify({
name:'ShuiTao',
  age:23
}) });

源文件index.js内容如下

console.log(process.env);
console.log(process.env.info);

最终转译后的js文件

console.log(process.env);
console.log({
      name:'ShuiTao',
      age:23
});

可以看到,在编译生成新js文件时,将process.env.info常量直接替换成了他对应的值文本,而process.env没有被替换,因为没有在DefinePlugin定义process.env

运行最终转译后的js文件时,process.env指向的是Node中的process,在process.env中找不到info属性,足以证明在DefinePlugin定义的process.env.infoNodeprocess没有任何关系,他只是一个在插件中定义的编译时的常量,编译后就已经被替换了,因此 理解清楚概念,他只是个编译时的常量,转译后就会被替换,只是恰好常量的名字是process.env.info

DefinePlugin插件用法的更多相关文章

  1. toastr.js插件用法

    toastr.js插件用法 toastr.js是一个基于jQuery的非阻塞通知的JavaScript库.toastr.js可以设定四种通知模式:成功.出错.警告.提示.提示窗口的位置.动画效果等都可 ...

  2. jquery uploadify文件上传插件用法精析

      jquery uploadify文件上传插件用法精析 CreationTime--2018年8月2日11点12分 Author:Marydon 一.参数说明 1.参数设置 $("#fil ...

  3. DefinePlugin插件

    这个插件允许你创建全局常量用于编译时解析.如果设置mode:"production",webpack默认会设置"process.env.NODE_ENV": J ...

  4. ASP.NET MVC5+EF6+EasyUI 后台管理系统(86)-日程管理-fullcalendar插件用法

    前言 本文分享fullcalendar用法,最后面提供代码下载 说到日程管理,基于JQuery的插件FullCalendar当之无愧,完整的API稳定和调用方式,非常易于扩展!可以用于系统的个人历程管 ...

  5. jquery.Inputmask 插件用法(中文API文档)

      jquery.Inputmask 可以算是input文本输入限制的神器了,内部融合了多种输入限制, 如金额,电话号码,身份证号,网关等..,并且还可以自定义规则. inputmask 据说最早起源 ...

  6. Unity 3D学习之 Prime31 Game Center插件用法

    http://momowing.diandian.com/post/2012-11-08/40041806328 It's my life~: 为app 连入Game Center 功能而困扰的朋友们 ...

  7. fullPage.js插件用法(转发)

    fullPage.js主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 动画 支持窗口缩放 窗口缩放时自动调整 可设置滚动宽度.背景颜色.滚动速 ...

  8. 图片上传插件用法,net语法【二】

    之前一直写过KindeEditor中的小控件作为单独上次,但业务要求需要另一种方式 现在改用ajaxfileupload.js试试,这个一百度 一.首页引用 <script src=" ...

  9. KindeEditor图片上传插件用法

    因业务需要找了款插件 KindeEditor编辑器确认挺好用,但无奈技术有限,上传配置不知,故问度娘! 图片上传对于部分新手来说有时候是一件非常头疼的事,今天来分享一下项目中使用到的这个插件Kinde ...

随机推荐

  1. vue项目中使用百度统计

    统计有多少人访问了自己的网站(wap端pc web端都适用),或者更细的统计网站每个页面的访问量,可以使用百度统计 百度统计传送门 按提示注册登录即可 登录后-->管理-->新增网站,配置 ...

  2. Java虚拟机详解(九)------类文件结构

    我们知道计算机是由晶体管.电路板等组装而成的电子设备,而这些电子设备其实只能识别0与1的信号. 那么问题来了,我们在操作系统上编写的Java代码(由字母.数字等各种符号组成),打包后部署到服务器上,是 ...

  3. GeoServer CQL查询时中文问题

    1.GeoServer可以进行CQL与ECQL过滤,wms和wfs都可以 2.CQL与ECQL查询时,当传中文时会报错.将中文转为Unicode编码后就可以 /* *js Unicode编码转换 */ ...

  4. linux ftp配置及实操

    一.基础知识: 1.ftp:file transfer protocal 及文件传输协,工作与应用层. 2.ftp协议的实现: 服务器端实现软件:vsftpd,pureftpd,filezilla s ...

  5. JS中的同步异步编程

    首先我们先看看同步与异步的定义,及浏览器的执行机制,方便我们更好地理解同步异步编程. 浏览器是多线程的,JS是单线程的(浏览器只分配一个线程来执行JS)   进程大线程小:一个进程中包含多个线程,例如 ...

  6. 【Powershell 教程】学习资源汇总

    [Powershell 教程]学习资源汇总 一.书籍教程 1.<Windows PowerShell实战指南>第3版 作者:[美] Don,Jones(道·琼斯),Jeffery,Hick ...

  7. No provider available for the service com.xxx.xxx 错误解决

    HTTP Status 500 - Servlet.init() for servlet springmvc threw exception type Exception report message ...

  8. jsp实现增加数据功能

    1. 环境的搭建 软件 数据库  sql myeclipse 8.0  tomcat 6.0 2. 安装完 myeclipse 配置下  部署tomcat 6.0 =1=> =2=>  新 ...

  9. FF.PyAdmin 接口服务/后台管理微框架 (Flask+LayUI)

    源码(有兴趣的朋友请Star一下) github: https://github.com/fufuok/FF.PyAdmin gitee: https://gitee.com/fufuok/FF.Py ...

  10. 解决 Docker Hadoop ssh "Connection to * closed".问题

    Docker 最近很火, 可以快速轻量级地虚拟出多个node,所以打算在Docker中跑Hadoop伪分布式应用. 其实要做出个简单的版本倒是不难,主要在 建立ssh无密码登录本机时,出现刚登录上去, ...