Webpack 知识体系学习｜ 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第12天

一.引言

前端构成：html js css ts 字体文件 图片资源等等，以前可以通过依赖于手动直接管理，这也限制了页面规模进而限制了前端的发展：

• • 人力管理成本高
• • 管理复杂
• • 对不同类型的资源的管理手段不同 后来出现了一些工程化工具来解决这些问题，管理工具

webpack是一种模块化打包工具，进行依赖管理和打包，它能够很好地管理与打包Web开发中所用到的HTML、 JavaScript 、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。

二.webpack使用流程

• 安装依赖npm install webpack webpack-cli --save-dev
• 编辑配置文件：入口entry 出口output
• 执行命令 npx webpack,在package.json的scripts部分增加：build:webpack，npx webpack 可以使用 npm run build 来替代了

三.webpack打包流程

1. 初始化参数

2. 入口处理，启动一个编译的过程

3. 开始找到依赖，进行依赖解析
4. 处理资源，把非js资源转换为js资源**
5. 重复第3 4步直到资源都被处理完成 3.4.5 编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；

6. 将资源进行合并打包：优化 混淆 压缩

7. 输出打包后的文件

四.Loader作用？为什么要使用

• loader的主要作用就是进行文件转化，仅仅是为了打包服务，主要运行在文件打包之前。
• 因为webpack只能认识js文件，因此需要loader进行资源的转化

babel

eslint

css

postcss

ts

vue

less

sass

stytuls

html

posthtml

file

url

五.Plugin作用是什么？

• webpack功能的拓展，用于增强功能的
• 针对打包过程中的某些事件节点执行自定义操作，不仅仅是为了打包服务，运行在文件的整个编译周期中。 eg:自动生成html代码

七.Babel

把高版本的代码转化为低版本的代码

八.模块热替换HMR（服务端修改后立刻呈现给浏览器watch:true）

• devServer配置项：hot:true
• 运行npm webpack server

底层依赖于一些插件，通过webpack-dev-server创建两个服务器：提供静态资源的服务（express）和Socket服务----长连接，用于监听变化更新资源

九.Ttree-shaking

模块中没有使用到的代码就不会打包到最终产物里，即删掉定义了未使用的代码 配置中model:production optimization:{uesExports:true}

十.Eslint代码风格检查

语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。 优化

• 缓存
• sourceMap 产物经过压缩，该工具可以映射回开发环境，便于调试
• 性能监控
• 日志
• 代码压缩