Webpack打包

Webpack 打包

---

---

打包图片

我们当前使用的webpack版本是webpack5：
 在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，并且配置资源体积限制实现；

下面是一个示例的Webpack配置文件，演示了如何配置asset/resource类型的处理规则：

const path = require('path');

module.exports = {
  // 入口
  entry: './src/index.js',

  // 出口
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    assetModuleFilename: 'images/[contenthash][ext][query]' 
    // [ext] : 扩展名, 比如 图片 png gif 等等
    // [name]: 文件名字
    // [hash]: 文件的内容，使用MD4的散列函数处理，生成的一个128位的hash值（32个十六进制）；
    // [hash: 8] 仅仅取前面8位
  },

  // 模块配置
  module: {
    rules: [
      // 其他规则...
      {
        test: /\.(png|jpg|gif)$/i, // 匹配图片文件
        type: 'asset/resource', // 使用 asset/resource 类型
        outputPath: 'assets/', // 输出路径
        publicPath: '/assets/' // 公共路径
      }
    ],
    generator: {
      // 资源模块类型为 asset 时的配置
      asset: {
        publicPath: '/assets/', // 公共路径
        outputPath: 'assets/' // 输出路径
      },
      // 资源模块类型为 asset/inline 时的配置
      assetInline: {
        publicPath: '/inline-assets/', // 公共路径
        outputPath: 'inline-assets/' // 输出路径
      },
      // 资源模块类型为 asset/resource 时的配置
      assetResource: {
        publicPath: '/resources/', // 公共路径
        outputPath: 'resources/' // 输出路径
      }
    }
  }
};

在上面的配置文件中，我们添加了一个规则来处理图片文件（以.png、.jpg或.gif结尾的文件）。通过设置type为asset/resource，Webpack会将匹配到的图片文件发送到指定的输出路径，并生成对应的URL。在这个例子中，我们将图片文件输出到assets/目录下，并设置了公共路径为/assets/。这样，在构建过程中，Webpack会自动处理这些图片文件，并将它们导出为URL。
generator是什么?
generator是Webpack配置中的一个选项，用于定义资源模块的生成器选项。
在Webpack中，资源模块是指那些需要被处理和输出的文件，例如图片、字体等。为了方便管理和控制这些资源模块的处理方式，Webpack提供了generator选项来集中配置资源模块的生成器选项。
通过设置generator选项，可以针对不同的资源模块类型进行不同的配置。例如，可以设置asset类型的资源模块的公共路径和输出路径，或者设置asset/inline类型的资源模块的公共路径和输出路径等。
在上面的配置文件中，我们使用generator选项来定义不同资源模块类型的生成器选项。对于asset类型的资源模块，我们设置了公共路径为/assets/，输出路径为assets/；对于asset/inline类型的资源模块，我们设置了公共路径为/inline-assets/，输出路径为inline-assets/；对于asset/resource类型的资源模块，我们设置了公共路径为/resources/，输出路径为resources/。这样，在构建过程中，Webpack会根据资源模块的类型自动选择合适的生成器选项进行处理和输出。

url-loader 的 limit 效果

开发中, 我们往往小的图片需要转换, 但是打的图片直接使用图片即可
这是因为小的图片可以转换成 base64,可以和页面一起被请求，减少不必要的请求过程；
而大的图片也进行转换，反而会影响页面的请求速度；
配置文件

rules: [
	 test: /\.(png|jpg|gif)$/i,
	 type: "asset",
	 generator: {
	 	filename:"img/[name].[hash:6][ext]"
	 },
	 // 添加一个parser属性，并且制定dataUrl的条件，添加maxSize属性；
	 parser: {
		dataUrlCondition: {
			maxSize: 100*1024
		}
	}
]