这是我参与「第五届青训营 」伴学笔记创作活动的第 14 天
一、本堂课重点内容：
- 本堂课的知识要点有哪些？
- Webpack 的本质
- Webpack 定义解析
- Webpack 优势
- 流程类配置
- 处理 CSS
- 接入 Babel
- 生成 HTML
- 使用 Webpack - 工具线
- Webpack 内容识别 - 只认识 JS
- 使用 Loader
- 认识 Loader ：链式调用与其他特性
- Loader 编写
- 常见 Loader
- 插件定义解析
- 插件设计优势
- Loader 与插件的差异
- Webpack 学习方法推荐
二、详细知识点介绍：
- 本堂课介绍了哪些知识点？
webpack定义及核心打包流程
历史：前端项目资源众多，png、jpg、js、ts、vue、tsx……早期的时候外部资源过多、依赖错综复杂限制了页面的规模和前端的发展，难以接入less、sass工具、资源不一致的问题，需要一种工具来解决前端工程化的问题
本质：webpack本质是一种前端资源的编译、打包工具，是一个资源中枢，一个重要工具。做到模块化和一致性，合并资源减少http请求数。
能力：把多份文件资源打包成一个bundle；支持babel、eslint、ts、coffescript、less、sass；支持模块化处理css、图片等资源文件；支持HMR+开发服务器、持续监听、代码分离、sourcemap等，功能强大。
使用：安装依赖、编辑配置文件、执行编译命令。
依赖：npm i -D webpack webpack-cli
配置文件：webpack.config.js
编译命令：npx webpack
核心流程：入口处理、依赖解析、资源解析、资源合并打包
入口处理：从entry文件开始启动编译流程
依赖解析：从entry文件开始找require、import文件
资源解析：根据module配置将非标准js资源转译为js内容
资源合并打包：插入运行时代码、代码优化等，将以上内容打包为可在浏览器运行的js文件
配置项：流程类/工具类
流程类：入口：entry/context、模块解析：resolve/externals/require/import、转译：module、后处理：optimization/mode/target、出口：output
工具类： 其他：amd/ball、开发效率：watch/devtool、性能优化：cache、日志：stats等
使用流程：由简到繁
- 流程类：
- 最基础：input/output
- 处理css：用module & css-loader
- 处理js：babel，声明一个loader
- babel：js代码转译工具（ES5和ES6的兼容，ES6转到ES5）。
- 需要的依赖@babel/core，@babel/preset-env/react/typescript，babel-loader
- 生成html：用插件webpack-html-plugin，可以自动生成html文件
- 工具类：
- HMR：
devServer:{hot:true}即可开启热替换- hot module replacement模块热替换
- 编译命令为npx webpack serve
- tree-shaking：
mode:production,optimization.usedExports:true(json)即可开启- 作用 ：删除没引用的代码
- 对工具类库有奇效，如lodash
- 其他：缓存、sourcemap（压缩映射，提高线上调试的效率）、日志等
- HMR：
loader组件
loader作用：内容转化（非js->js)，因为webpack只认识js 安装各种loader依赖，链式调用less-css-style
其他特性：
- 链式执行
- 支持异步执行
- 分normal、pitch两种模式 常用loader：
plugin组件
插件架构的精髓：只做核心功能，对扩展开放、对修改封闭
用：装插件、引入插件、在plugins里new一个插件实例
写：很难，钩子，包含编译的时机、上下文和交互接口
未完持续……
学习方法
先入门，理解打包流程、能用即可，也会用其他脚手架
进阶：理解loader和plugin，自行开发组件，了解性能优化手段，工程化概念和认知
大师：读源码，理解webpack
新手知识点：
三、实践练习例子：
- 有什么实践举例帮助理解知识点？
- 使用webpack - 写配置文件
例如：处理css就要加入module，配css-loader，规则是写明rules：找文件规则，写明use：用什么loader来处理
例如：使用插件，在上方require，在plugins导入并new一个实例
写一个loader：
四、课后个人总结：
- 本章有什么知识点不容易掌握？
- loader的写法，一旦开始读源码我就傻了
- plugin的写法
- 什么地方容易与其他内容混淆？
五、引用参考：
- 文章中有什么地方是我参考引用了外部博客/笔记/文章的？
