打包资产模块

Asset Modules webpack5内置了如果简单的处理一些文件，以代替使用各种各样的loader

raw-loader 打包文件，输出文本
file-loader 打包文件，输出文件
url-loader 打包文件，输出文件DataURL

以上上过loader经常的出现在webpack的配置中，但是webpack5为了简单化将资源打包分为三类，已经不推荐使用各种文件loader了：resource、inline、source、asset 并默认提供模块化能力

type: resource 打包输出对应的文件（file-loader）
type: inline 打包成DataURL string资源（url-loader）
type: source 打包输出对应的资源文本的字符串形式（row-loader）
type: asset 在 resource 和 inline 之间进行自动选择，通过parser配置项设置
如果你实在需要loader来处理，那么可以设置为 type: 'javascript/auto'，来忽略webpack5对改资源的默认处理

CSS引入的资源

上节说，CSS引入资源虽然能够打包，但是无法模块化，但是asset是自动模块化的，我们可以用它来配置打包的对应文件资源

let output = {
  ...output,
  // 默认的 asset 打包的filename，优先级小于配置的loader的 generator
  assetModuleFilename: 'assets/[name][ext]'
}

let loaders = [
  ...loaders,
  {
    test: /.(png|jpg|jpeg)$/,
    type: 'asset',
    generator: {
      filename: 'assets/image/[name][ext]'
    },
    parser: {
      // 选择的条件，小于 maxSize 字节数的资源都会被打包成 inline
      dataUrlCondition: {
        maxSize: 70 * 1024
      }
    }
  }
]

这样就可以正常的使用文件资源模块化的能力了。

css-loader 已经完全的提供了打包内部url资源输出文件的能力，如果这个资源不需要模块化引入文件并且不需要关注资源文件输出路径，可以不需要webpack5提供的asset类型额外配置

分析loader解析流程

css-loader和html-loader很像，都是为了处理css/html资源而做的翻译官，他们自带了处理其它资源的能力，但是无法模块化（或者说不提供模块化和输出资源到哪里的能力）。loader解析的大概过程：

css-loader（html-loader），先将css文件翻译成webpack能够识别的语法（模块化成JS），识别的过程中
- 遇到资源路径：这时候css-loader优先将遇到的资源控制权交给webpack，让webpack的loader匹配，如果webpack的loader匹配到了处理，没有的话css-loader自己做一个兜底处理（当然这个兜底处理有些普遍了，打包的资源全局放在打包文件根目录下）
- 遇到css内容：进行识别和组合，最终输出JS模块化内容（当然到底输出那种模块化也是可以控制的）
css-loader就这样边翻译边处理资源，最终被其他JS模块化引入（当然其它js必须支持css-loader处理之后的模块化形式）

资产压缩

图片压缩：ImageMinimizerWebpackPlugin ImageMinimizerWebpackPlugin

总结

示例 code-example / 03-example

03-打包资产模块

打包资产模块

CSS引入的资源

分析loader解析流程

资产压缩

总结