-
Webpack5学习大纲笔记
- 五大核心概念
- entry：入口
- 指示 Webpack 从哪个文件开始打包
- output：输出
- 指示 Webpack 打包完的文件输出到哪里去，如何命名等
- Loader：加载器
- webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析
- plugins：插件
- 扩展Webpack的功能
- mode：模式
- 开发模式：development
- 生产模式：production
- entry：入口
- 常见Loader
- Loader经常处理的资源
- CSS、Less、Sass等CSS资源；
- 图片/媒体资源；（webpack5内置）
- Babel 编译器资源（babel-loader）
- Loader经常处理的资源
- 常见Plugins
- Plugins经常处理的资源
- Eslint语法检查（EslintWebpackPlugin）
- HTML资源（HtmlWebpackPlugin）
- 将CSS以单独的文件输出（MiniCssExtractPlugin）
- 压缩CSS资源（CssMinimizerWebpackPlugin）
- Plugins经常处理的资源
- Webpack优化配置
- 优化角度：
- 1.提升开发体验
- SourceMap：获得精确位置的错误提示
- 2.提升打包构建速度
- HotModuleReplacement：局部热更新
- OneOf ：当命中一个loader之后不再验证其他loader
- Include / Exclude ：只编译处理包含的 或 编译处理 Exclude 以外的所有文件
- Cache ：对 Eslint 检查 和 Babel 编译结果进行缓存
- 3.减少代码体积
- 抽离 Babel 对每一个被转换的文件加入的辅助代码，并单独引用
- 本地图片的压缩
- CSS的压缩
- 4.优化代码运行性能
- Code Split 代码分隔：
- 分割文件：将打包生成的文件进行分割，生成多个 js 文件。
- 按需加载：需要哪个文件就加载哪个文件。
- Preload / Prefetch：
- Preload：告诉浏览器立即加载资源。
- Prefetch：告诉浏览器在空闲时才开始加载资源。
- 他们都是只加载 但是不执行，且都有缓存
- Network Cache：
- 静态资源缓存优化，要用contenthash来解决当文件内容发生变化但输出文件名称没变从而导致的浏览器直接读取缓存而不是最新文件的情况
- Core-js
- 对JS做兼容处理，可以处理ES6以上的版本
- Code Split 代码分隔：
- 1.提升开发体验
- 优化角度：
- 五大核心概念
-
相关阅读:
说说你对vue的mixin的理解，有什么应用场景
Linux本地WBO创作白板部署与远程访问
Automated defect analysis in electron microscopic images-论文阅读笔记
北斗三号短报文终端在大坝安全监测方案的应用
监听U盘插入 拔出 消息，获得U盘盘符
hadoop103 Permission denied (publickey,gssapi-keyex,gssapi-with-mic,password)
[NOIP2006 提高组] 作业调度方案
sprintboot容器功能
当Number类型的id超过16位时，JavaScript的数据处理和储存问题
C语言文件缓冲区
- 原文地址：https://blog.csdn.net/qq_59181609/article/details/126393696