webpack 相关知识总结

复习前端知识的时候将 webpack 的相关知识总结到一块儿方便查找和参考。从问题点入手，具体某个问题的深刻另作分析。

webpack 的 loader 和 plugin 的区别

• loader是对源码层面的转换、webpack 只能识别 js 和 json 文件、其余字资源文件好比 css、 ts 等则须要 loader 进行转换，loader 更像是一个翻译器，将各类类型的语言翻译成 webpack 能够识别的类型
• plugin是对 loader 没法实现的功能的补充、一般有各自独立的功能，好比热加载插件，plugin 更像是一个增值套件。提供特定的增值服务。

plugin 能够自定义打包过程的方式，能够参加到整个生命流程中

webpack 原理

理解webpack原理，手写一个100行的webpack - 知乎

1. Webpack 的打包须要配置一个 entry，根据 entry 配置的文件目录读取文件的内容
2. 读取到的内容是字符串，调用 babylon 来生产对应的 ast，ast 中包含依赖的文件
3. 将依赖文件循环调用，生成模块 id 和依赖路径的关联信息，例如

{"1": "./abc.js" }
复制代码

模拟 commonJs 的加载机制，将代码翻译成能够在浏览器里执行的样子 require 接收一个模块 id 而后从以前保存的依赖关联信息中找到并执行模块代码

什么是 webpack 和 grunt 和 gulp 有什么不一样

Webpack 与 grunt 的 gulp 最大的不一样各自的侧重点不一样 grunt 和 gulp 是侧重在流程控制， webpack 侧重在打包机制。 其中 webpack 的 loader 和 gulp 的流程控制相似。

bundle、chunk、module

• bundle 是 webpack 打包出来的文件
• chunk 是 webpack 代码分割出来的代码块
• Module 是开发过程当中的模块

webpack-dev-server 的优势

在内存中存储开发环境下打包生成的文件、能够实现热更新。

模块热加载的原理

1. 启动本地服务，当浏览器发起请求资源的请求时做出响应。
2. webpack-dev-server 启动服务，与客户端造成 websocket 长链接
3. webpack 监听本地文件变化，以触发从新编译，生成新的 hash 值和编译后已改动的文件，推送客户端消息编译完成。
4. 客户端对比接收到的消息，一致缓存、不一致发起 ajax 请求和 jsonp 请求来作最新替换。
5. 本地服务，替换存在内存中的文件内容实现实时刷新。

webpack 持久化缓存

Webpack 持久化缓存实践 - 前端大全 - CSDN博客

• 保证业务静态资源文件的 hash 值变化，既每次发布都有惟一的 hash 值

webpack loader 的书写顺序有什么讲究吗，style-loader必须放在css-loader 以前吗

• webpack loader 的加载顺序采用的是从右到左，是经过函数式编程中的 compose 来实现的，因此在书写的时候须要按照从右向左的顺序来，css-loader 在右，先处理，完成以后再交给 style-loader 处理，顺序不能调整

参考文章：

• Webpack 持久化缓存实践 - 前端大全 - CSDN博客
• 理解webpack原理，手写一个100行的webpack - 知乎