Webpack5
1. 基本使用
- 两种开发模式
- 开发模式:代码能编译自动化运行
- 生产模式:代码编译优化输出
Webpack
基本功能- 开发模式:可以编译
ES Module
语法 - 生产模式:可以编译
ES Module
语法,压缩js代码
- 开发模式:可以编译
Webpack
配置文件- 5个核心概念:
entry
:入口,从哪个文件开始打包output
:输出,打包完的文件输出到哪里去,如何命名等loader
:加载器,除js/json
资源外,其他资源都需要借助loader
解析(从右向左,从下向上)plugins
:插件,扩展Webpack
功能mode
:模式,开发/生产
devServer
配置:开发服务器&自动化
- 5个核心概念:
Webpack
脚本指令用法webpack
直接打包输出webpack serve
启动开发服务器,内存编译打包没有输出
2. 高级优化
- 提升开发体验
- 使用
Source Map
让开发或上线时代码报错能有更加准确的错误提示。
- 使用
- 提升
webpack
打包构建速度- 使用
HotModuleReplacement
让开发时只重新编译打包更新变化了的代码,不变的代码使用缓存,从而更新速度更快。 - 使用
OneOf
让资源文件一旦被某个loader处理了,就不会继续遍历了,打包速度更快。 - 使用
Include/Exclude
排除或只检测某些文件,处理的文件更少,速度更快。 - 使用
Cache
对eslint和babel
处理的结果进行缓存,让第二次打包速度更快。 - 使用
Thead
多线程处理eslint和babel
任务,速度更快。(需要注意的是,进程启动通信都有开销的,要在比较多代码处理时用才有效)
- 使用
- 减少代码体积
- 使用
Tree Shaking
剔除了没有使用的多余代码,让代码体积更小。 - 使用
@babel/plugin-transform-runtime
插件对babel
进行处理,让辅助代码从中引入,而不是每个文件都生成辅助代码,从而体积更小。 - 使用
Image Minimizer
对项目中图片进行压缩,体积更小,请求速度更快。(需要注意的是,如果项目中图片都是在线链接,那么就不需要了。本地项目静态图片才需要进行压缩)
- 使用
- 优化代码运行性能
- 使用
Code Split
对代码进行分割多个js文件,从而使单个文件体积更小,并行加载js速度更快。并通过import
动态导入语法进行按需加载,从而达到需要使用时才加载该资源,不用时不加载资源。 - 使用
Preload/Prefetch
对代码进行提前加载,等未来需要使用时就能直接使用,从而用户体验更好。 - 使用
Network Cache
能对输出资源文件进行更好的命名,将来做好缓存,从而用户体验更好。 - 使用
Coer-js
对js进行兼容性处理,让我们代码能运行在低版本浏览器。 - 使用
PWA
能让代码离线也能访问,从而提升用户体验。
- 使用