阅读 93

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 处理,顺序不能调整

参考文章:

关注下面的标签,发现更多相似文章
评论