webapck学习笔记-处理图片资源以及资源分类

处理图片资源配置的loader

之前的版本webpack4，我们处理图片资源通过 file-loader 和 url-loader 进行处理

现在webpack5已经将这两个 Loader 功能内置到webpack里了，我们只需要简单配置即可处理。

资源模块

资源模块（asset module）是一种模块类型，它允许使用资源文件（字体、图标等）而无需配置额外的loader。 资源模块类型（asset module type）通过添加4个模块类型，来替换所有这些loader。

• asset/resource 发送一个单独的文件并导出URL。之前通用使用file-loader实现。
• asset/inline 导出一个资源的data URL。之前通过使用url-loader实现。
• asset/source 导出资源的源代码。之前通过使用raw-loader实现
• asset 在导出一个 data URL 和发送一个单独文件之间自动选择。之前通用url-loader，并且配置资源体积限制实现。

webpack.config.js:

module.exports={
  module: {
    rules:[
      {
        test: /\.(png|jpg|gif)$/i,
        type: "asset",
        parser:{
          dataUrlCondition:{
            maxSize: 10*1024 // 10kb
          }
        }
      }
    ]
  }
}

将某些文件资源发送到指定目录

当我们想把输出的资源进行整合时，就是把所有的图片资源放到 image文件目录下，所有的样式css放到css的目录下，所有的放到js的文件目录下。

把图片放到image文件夹下

把js资源放到js文件夹下