webpack 相关

Sandm °0121

已于 2024-05-20 15:13:00 修改

阅读量582

点赞数 14

文章标签： webpack 前端 node.js

于 2024-05-20 15:09:25 首次发布

本文链接：https://blog.csdn.net/weixin_71479122/article/details/139065383

版权

1. Webpack的理解

2. Webpack的作用

3. webpack的理解，什么是webpack

9. css-loader和style-loader的区别

10. 比较常见的loader的有哪些

11. 为什么css-loader要运行在style-loader之前

12. sass-loader运行前提

1. Webpack的理解

Webpack是一个静态资源打包工具，它会以一个或多个文件作为打包的**入口**，将我们整个项目所有文件编译组合成一个或多个文件**输出**出去

2. Webpack的作用

编译（让浏览器认识的）、构建（模块化工程）、压缩（减少体积的）

对浏览器不识别的语言进行编译
对相互存在依赖引用的文件进行构建
对象整体项目进行压缩

3. webpack的理解，什么是webpack

Webpack是目前最流行的静态资源打包工具，本身功能非常局限，只能处理js和json等资源，但是有着非常丰富的生态资源，使webpack可以打包各类型文件

4. webpack的五大核心概念

entry 入口文件
output 输出文件
loader 加载器用于解析并引入不同类型的文件
plugins 插件拓展webpack功能
mode 规定了webpack的两种模式
- 开发模式
- 生产模式

5. 在webpack5之前怎样打包图片

在webpack5之前打包图片需要手动下载file-loader和url-loader

6. webpack的优化

性能优化
1. 在处理打包图片资源的时候，配置相关laoder，设置足够小的图片、变成base64的形式，以减少请求数量，当然，这样带来的缺点会使得体积变得更大
2. 可以使用代码分割技术，对输出的文件进行功能划分，从而达到分割js和按需引入js的目的
开发体验优化
1. 我们利用SourceMap生成代码映射文件，可以准确的看到行映射和列映射的对应关系，从何直观的判断出开发过程中的bug
打包构建速度优化
1. 开启热更新 (HMR)
2. 可以使用oneOf减少loader的匹配次数
3. 通过include和exclude进行筛选，可以大大提升处理js文件的时间
减少代码体积
1. Tree Shaking：升级为webpack5，利用Tree Shaking移出js上没有使用的代码，达到缩小体积的目的
2. CDN引入：将打包之后依赖库的大小进行对比，体积大的第三方插件库使用CDN方式进行引入，从而减少代码体积
3. 抽离并合并配置文件中的相同代码段
4. 使用无损或有损进行图片的压缩（针对图片进行压缩），来减少图片的体积
5. Babel会为每个文件插入辅助代码，从而使得代码体积过大，可以用相应插件进行辅助代码抽离，达到减小代码体积
代码分割优化 ( Code Split )

7. webpack工作流程

1.初始化参数：从配置文件读取与合并参数，得出最终的参数
2.开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，开始执行编译
3.确定入口：根据配置中的 entry 找出所有的入口文件
4.编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
5.完成模块编译：在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系
6.输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会
7.输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。