Webpack的一些知识（二）

HMR

模块热替换是指在应用运行中，替换、添加、删除模块，而无需重新刷新整个页面

• 主要靠webpack-dev-serve这个插件创建两个服务：提供静态资源的服务（express）和Socket服务

• express服务主要负责直接提供静态资源的服务（打包后的资源直接被浏览器请求和解析）

Socket是一个长连接的服务

• 能够实现建立后可以全双工的通信

• 当服务器监听到对应的模块发生变化时，会生成.json文件和.js文件

• 通过长连接，可以直接将这两个文件主动发送给客户端

• 浏览器拿到两个新的文件后，通过HMR runtime机制，加载两个文件，并针对修改的模块进行更新

Webpack浏览器兼容

我们要调兼容性，现在有很多工具，可以帮我们做这些事，比如说postcss、autoprefixer、babel等，但有时我们不一定要兼容市场上全部的浏览器，因为如果对于兼容性需求不高，但性能要求高，兼容全部浏览器会导致代码太多，包太大，体验降低。所以我们需要告诉这些工具我们需要兼容到什么程度。

Browserslist这个工具通过查询caniuse这个网站上面的不同浏览器市场占比来告诉上面那些工具我们的代码需要兼容浏览器到什么程度。

例：设置>1%，last verson 2，no dead，表示css、js要兼容市场占有率大于1%的浏览器，最后两个版本，2年内有更新

编写：

在package.json里，

browserslist:[
    >1%,
    last verson 2,
    not dead
]

或创建 .browserslistrc文件编写

Babel到底是什么？

Babel用于将ES6语法转换为向后兼容版本的JavaScript，它是一个工具链，而不是一个工具，因为它采取了微内核的一个架构，就是说他只实现了核心功能，用户需要更多的功能，再自行添加或编写。

JavaScript代码解析流程：js代码->AST抽象语法树->字节码文件->js引擎执行

从一种源代码到另一种源代码是编译器的工作，事实上我们可以将babel看做是一个编译器。

Babel也拥有编译器的工作流程：

解析

转换

代码生成