webpack5 小记
模块化语法是es6 出现的，需要告知浏览器 type = module , 不然浏览器就认为是传统js脚本，而非模块化脚本，就无法识别import 等，
import xxx
export xxx
CommonJS 模块化： 用于node.js，不能直接在浏览器中运行，需要通过打包工具转换。
AMD 模块化：可以在浏览器中运行，但需要加载器（如 RequireJS）。
es6 出来后 有了官方的模块化方案，解决了 js脚本之间的相互污染，复用性差等问题。
1. webpack 简介
webpack 于2012年发布
es6 2015年发布
webpack 初期主要目的
- 解析和打包 CommonJS 和 AMD 模块，将它们转换为浏览器可用的代码 ，es6 的出现淡化了这一功能。
- 模块隔离，将每个模块封装在一个函数作用域中，避免模块内的变量泄露到全局。
- 支持非 JavaScript 资源
2. webpack 配置
webpack本身采用的是commonjs 规范
- entry
- output
- module： 模块加载器 加载器让webpack能够处理非js文件
1. 样式 字体 图片 等资源
2. js资源 ：尽管webpack本身就支持js资源，为什么我们还要用额外的js加载器处理呢- 支持现代 JavaScript 语法，es6，es7等语法，浏览器支持度并不一样，（babel-loader）js加载器 能转换为浏览器兼容的代码
- 支持模块化 除了es6的模块化，还会兼容支持其他复杂的模块化（commonjs等）
- 支持其他 JavaScript 变体 （TypeScript，jsx，
.vue文件）
3. 高阶配置
- oneof ：避免文件规则重复匹配 ，打包速度就会快一点 eg：css 遇到css-loader后，就会停止遍历其他规则。
- Thread: 多进程打包，仅在大项目 耗时项目 操作。因为每个进程启动就需要600ms
- tree-shaking: 打包时移除没有使用的包。依赖ES module webpack 生产环境默认开启了该功能
- babel优化：babel为每个处理过的文件都添加了大量重复的辅助代码，使用
babel/plugin-transform-runtime来解决，它禁用了对每个编译过的文件的自动注入，而是选择引用它当中的辅助代码。 - image 压缩 （本地在线图片） ：分为有损压缩，无损压缩 。 webpack地址
- code split：js代码分割打包，哪个改了更新哪个，大型项目必备
- preload/prefetch ：懒加载时的资源过大，就要提前空闲时加载，真正调用时直接从缓存加载 插件地址
通过 *** 标签，提前告知浏览器加载关键资源（如脚本、样式、字体等），在浏览器主线程空闲时提前加载资源，从而优化关键渲染路径。
- core-js: 提供旧浏览器缺失的API ，如promise，set 等，是一个打补丁操作
babel 是解决高级语法兼容性问题，core 是解决
API的兼容性问题 - PWA 离线页面保持：webpack地址
- 总结
4. 原理
- loader：