webpack 入门

5 大核心概念

1. entry(入口) 从哪个文件开始打包

2. output(输出) 打包完的文件输出地址和如何命名等

3. loader(加载器) webpack 本身只能处理 js,json 等资源，其他资源需要借助 loader 才能解析

4. plugin(插件) 扩展 webpack 的功能

5. mode(模式)

• 开发模式 1.编译代码，让浏览器能够识别运行 2.代码质量检测，树立代码规范
• 生成模式

优化

1. 提升开发体验
   • 使用 source map 让开发或上线时代码报错能有更加准确的错误提示
   1. 开发模式：cheap-module-source-map
   • 优点：打包编译速度快，只包含行映射
   • 缺点：没有列映射
   2. 生成模式：source-map
   • 优点：包含行和列映射
   • 缺点：打包编译速度慢一点
2. 提升打包构建速度
   • 使用 HoutModuleReplacement 让开发时只重新编译打包更新变化了的代码，不变的代码使用缓存，从而更新速度更快
   • 使用 OneOf 让资源文件一旦被某个 loader 处理了，就不会继续遍历了，打包速度更快
   • 使用 Include/Exclude 排除或只检测某些文件，处理的文件更少，速度更快
   • 使用 Cache 对 eslint 和 babel 处理的结果进行缓存 ，让第二次打包速度更快。
   • 使用 Thead 多进程处理 eslint 和 babel 任务，速度更快（需要注意的是，进程启动通信都是有开销的，要在比较多代码处理时使用才有效果）
3. 减少代码体积
   • Tree Shaking 移除 js 中没有使用的代码
   • Babel Babel 为编译的每个文件都插入了辅助代码，可以将这些辅助代码作为一个独立模块，避免重复引入
   • Image Minimizer 对图片进行压缩，减少图片体积
4. 优化代码运行性能
   • Code Split 分割文件，按需加载 import()
   • Preload/Prefetch 在浏览器空闲时间，加载后续需要的资源 preload:立即加载 prefetch:空闲时加载
   • Network Cache （runtimeChunk）
   • Core-js 专门用来做 ES6 及以上 API 的 polyfill(垫片/补丁，社区提供的代码),让不兼容新特性的浏览器上可以使用
   • PWA（progressive web application 渐进式网络应用程序）在离线时应用程序能够继续运行功能（workbox）兼容性不好