这是我参与「第五届青训营 」笔记创作活动的第 11 天
asset module type
在webpack5之前，加载资源需要使用一些loader，比如raw-loader 、url-loader、file-loader
在webpack5开始，我们可以直接使用资源模块类型（asset module type），来替代上面的这些loader
资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader
- asset/resource 发送一个单独的文件并导出 URL。
之前通过使用 file-loader 实现 - asset/inline 导出一个资源的 data URI。
之前通过使用 url-loader 实现 - asset/source 导出资源的源代码 之前通过使用 raw-loader 实现
- asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。
之前通过使用 url-loader，并且配置资源体积限制实现
几个最常用的placeholder：
- [ext]： 处理文件的扩展名
- [name]：处理文件的名称
- [hash]：文件的内容，使用MD4的散列函数处理，生成的一个128位的hash值（32个十六进制）
url-loader的limit效果
开发中往往是小的图片需要转换，但是大的图片直接使用图片即可，这是因为小的图片转换base64之后可以和页面一起被请求，减少不必要的请求过程，而大的图片也进行转换，反而会影响页面的请求速度。
需要两个步骤来实现：
- 将type修改为asset
- 添加一个parser属性，并且制定dataUrl的条件，添加maxSize属性
babel
事实上，在开发中很少直接去接触babel，但是babel对于前端开发来说，目前是不可缺少的一部分： 开发中，我们想要使用ES6+的语法，想要使用TypeScript，开发React项目，它们都是离不开Babel的。所以，学习Babel对于我们理解代码从编写到线上的转变过程至关重要；
那么，Babel到底是什么呢？
Babel是一个工具链，主要用于旧浏览器或者环境中将ECMAScript 2015+代码转换为向后兼容版本的JavaScript； 包括：语法转换、源代码转换等。
Babel命令行使用
babel本身可以作为一个独立的工具（和postcss一样），不和webpack等构建工具配置来单独使用。 如果我们希望在命令行尝试使用babel，需要安装如下库：
- @babel/core：babel的核心代码，必须安装
- @babel/cli：可以让我们在命令行使用babel
npm install @babel/cli @babel/core -D
使用babel来处理源代码：
- src：是源文件的目录
- --out-dir：指定要输出的文件夹dist
npx babel src --out-dir dist
插件的使用
如果需要转换箭头函数，那么我们就可以使用箭头函数转换相关的插件：
npm install @babel/plugin-transform-arrow-functions -D
npx babel src --out-dir dist --plugins=@babel/plugin-transform-arrow-functions
Babel的预设preset
但是如果要转换的内容过多，一个个设置是比较麻烦的，我们可以使用预设（preset）：
安装@babel/preset-env预设：
npm install @babel/preset-env -D
执行如下命令：
npx babel src --out-dir dist --presets=@babel/preset-env
babel-loader
在实际开发中，我们通常会在构建工具中通过配置babel来对其进行使用，比如在webpack中。
那么我们就需要去安装相关的依赖：
如果之前已经安装了@babel/core，那么这里不需要再次安装。
我们可以设置一个规则，在加载js文件时，使用我们的babel：
babel-preset
如果我们一个个去安装使用插件，那么需要手动来管理大量的babel插件，我们可以直接给webpack提供一个preset，webpack 会根据我们的预设来加载对应的插件列表，并且将其传递给babel。
比如常见的预设有三个：
- env
- react
- TypeScript
