webpack5

优化代码运行性能 Code Split 为什么 打包代码时会将所有 js 文件打包到一个文件中，体积太大了。我们如果只要渲染首页，就应该只加载首页的 js 文件，其他文件不应该加载。 所以我们需要将打

减少代码体积 Tree Shaking 为什么 开发时我们定义了一些工具函数库，或者引用第三方工具函数库或组件库。 如果没有特殊处理的话我们打包时会引入整个库，但是实际上可能我们可能只用上极小部分的功

提升打包构建速度 HotModuleReplacement 为什么 开发时我们修改了其中一个模块代码，Webpack 默认会将所有模块全部重新打包编译，速度很慢。 所以我们需要做到修改某个模块代码，就

提升开发体验 SourceMap 为什么 开发时我们运行的代码是经过 webpack 编译后的，例如下面这个样子： 所有 css 和 js 合并成了一个文件，并且多了其他代码。此时如果代码运行出错那么

Css 处理 提取 Css 成单独文件 Css 文件目前被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式 这样对于网站来说，会出现闪屏现象，用户体验不好 我们应该是

生产模式介绍 生产模式是开发完成代码后，我们需要得到代码将来部署上线。 这个模式下我们主要对代码进行优化，让其运行性能更好。 优化主要从两个角度出发: 优化代码运行性能 优化代码打包速度 生产模式准备

开发服务器&自动化 每次写完代码都需要手动输入指令才能编译代码，太麻烦了，我们希望一切自动化 1. 下载包 2. 配置 webpack.config.js 3. 运行指令 注意运行指令发生了变化 并且

处理 Html 资源 1. 下载包 2. 配置 webpack.config.js 3. 修改 index.html 去掉引入的 js 文件，因为 HtmlWebpackPlugin 会自动引入 4.

处理 js 资源 有人可能会问，js 资源 Webpack 不能已经处理了吗，为什么我们还要处理呢？ 原因是 Webpack 对 js 处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他

处理其他资源 开发中可能还存在一些其他资源，如音视频等，我们也一起处理了 1. 配置 就是在处理字体图标资源基础上增加其他文件类型，统一处理即可 2. 运行指令 打开 index.html 页面查看效

处理字体图标资源 1. 下载字体图标文件 打开阿里巴巴矢量图标库 选择想要的图标添加到购物车，统一下载到本地 2. 添加字体图标资源 src/fonts/iconfont.ttf src/fonts/

自动清空上次打包资源 1. 配置clean: true, (自动将上次打包目录资源清空) 2. 运行指令 观察 dist 目录资源情况

修改输出资源的名称和路径 1. 配置 2. 修改 index.html 3. 运行指令 此时输出文件目录： （注意：需要将上次打包生成的文件清空，再重新打包才有效果）

处理图片资源 过去在 Webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理 现在 Webpack5 已经将两个 Loader 功能内置到 Webpac

处理样式资源 本章节我们学习使用 Webpack 如何处理 Css、Less、Sass、Scss、Styl 样式资源 介绍 Webpack 本身是不能识别样式资源的，所以我们需要借助 Loader 来

基本配置 在开始使用 Webpack 之前，我们需要对 Webpack 的配置有一定的认识。 5 大核心概念 entry（入口） 指示 Webpack 从哪个文件开始打包 output（输出） 指示

最近在项目中使用到了webpack对项目的图片、css兼容性、js的兼容性、减少代码体积等进行了优化。我这边主要使用的是webpack5，今天就让我们一起来看看吧！ 基本使用 Webpack 是一个静