webpack进阶用法实践1默认是webpack5 难度 🌟🌟🌟 阅读时间：20min 源代码 base-2分支

默认是webpack5

难度 🌟🌟🌟

阅读时间：20min

源代码 base-2分支

**postcss-preset-env 包含 autoprefixer ，因此如果你已经使用了 preset 就无需单独添加它了；【基于webpack5】
autoprefixer是css的后置处理器；添加前缀用的；
postcss-loader使用 PostCSS 处理 CSS 的 loader。如果要使用最新版本的话，你需要使用webpack v5。
- 为了使用本 loader，你需要安装 postcss-loader 和 postcss：

npm install --save-dev postcss-loader postcss

然后添加本 loader 的相关配置到你的 webpack 的配置文件；

在 webpack 5 之前，通常使用：
- raw-loader 将文件导入为字符串
- url-loader 将文件作为 data URI 内联到 bundle 中
- file-loader 将文件发送到输出目录
资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：
- asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。【处理字体】【处理图片】
- asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。【处理svg】【处理图片】
- asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。【处理文件.txt/.excel】
- asset 在导出一个 data URI 和发送一个单独的文件之间自动选择,8kb。之前通过使用 url-loader，并且配置资源体积限制实现。【处理图片】