1.处理css
css-loader:将css转成commonjs
style-loader：生成style标签
2.处理less
less-loader:将less转成css
3.处理sass
sass、sass-loader:将sass转成css
4.处理stylus
stylus-loader
5.处理图片
file-loader:将资源原封不动地输出。
url-loader:将图片转为base64，资源优化。
webpack5中将这两个loader功能内置到webpack中，只需简单配置。
配置type："asset"可自动转化成base64
6.修改输出文件目录
修改js文件位置
修改静态资源文件输出目录
7.自动清空上次打包内容
8.处理字体图标资源
9.处理其他资源
10. 处理eslint文件
webpack4中使用loader处理，webpack5中使用plugin。
eslint、 eslint-webpack-plugin :使用 eslint来查找和修复 JavaScript 代码中的问题。
11、将高级js语法转成低级js
babel-loader @babel/core @babel/preset-env
12.自动生成html引入打包输出资源
html-webpack-plugin: 自动生成html文件
13. 开启服务器监测代码变化自动打包
webpack-dev-server
指令：npx webpack serve
注意：开发服务器不会输出资源，在内存中编译打包。
14. 生产模式配置
生产模式需要新建一个配置文件：webpack.prod.js
- 运行代码是在外部运行的，所以绝对路径都需要回退一级目录
- 生产模式不需要devServer
配置运行指令：
15. 提取css成单独文件
原因：
使用min-css-extract-plugin, 去除style-loader
16. css兼容性处理
postcss-loader postcss postcss-preset-env
配置兼容ie8以上：
常用兼容配置：所有浏览器最近两个最新版本，并且覆盖99%的浏览器，并且不是死的版本。
17. 封装重复loader
18. css压缩
html和js在生产环境下会自动压缩，但css不会，需要用插件css-minimizer-webpack-plugin
19. sourcemap
配置devtool属性
- 开发模式：cheap-module-source-map，只关心行不关心列
- 生产模式：source-map，行列都关注，因为生产模式下会压缩代码成一行，所以需要知道列。
20.提升构建打包速度 HotModuleReplacement
css默认会热更新，但js不会，需要手动配置
实际开发中不会这么配置，一些loader会自动配置好，例如：vue-loader，react-hot-loader
21. 优化loader匹配
oneOf属性
22. 打包优化include、exclude
23. 提升打包速度，缓存babel、eslint
二次打包时只针对修改过的文件，其他采用缓存的内容，提升打包速度。
24. 提升打包速度，多进程打包
使用thread-loader开启多线程
25. 减少babel打包的文件体积，抽离辅助代码
babel会自动为每个文件都定义一些需要使用的辅助代码，很多辅助代码都重复了，需要将这些辅助代码抽离成独立模块，减小体积。
@babel/plugin-transform-runtime
26.压缩图片
image-minimizer-webpack-plugin、imagein
27. 分割代码（提取多次使用的代码，不重复编译）
多入口：
多入口提取公共模块：
多入口按需加载：
单入口按需加载：
模块命名：
统一命名规范：
28。 preload和prefetch
@vue/preload-webpack-plugin
preload:
prefetch:比较实用，但兼容性问题比较大
29. 打包资源缓存 network cache
根据文件内容生成哈希值：
A文件依赖B文件，B文件变化时文件名的哈希值也会变化，导致A文件也发生变化。需要有个runtime文件来做指定依赖变量在哪个文件中找，当B文件变化，A文件没有变化时，A文件不会打包生成新文件。
30. js兼容性问题corejs
实现corejs的按需加载：
31. 项目离线缓存：PWA
生成service-worker文件：
