file-loader

Loading pictures

  1. download

npm i file-loader -D

  1. Configured to use
module: {
    // Module configuration
    rules: [{test: /.(png|jpe? g|gif)$/i.// Parse the image
        use: 'file-loader'}}]Copy the code

The default output is to the root directory and is the hash file name.

  • Configure the output file name
module: {
    // Module configuration
    rules: [{test: /.(png|jpe? g|gif)$/i.// Parse the image
        use: {
          loader: 'file-loader'.options: {
            name: '/img/[name].[hash:6].[ext]' // /img/ Original file name, 6-bit hash. Original suffix}}}]}Copy the code

View additional configuration items and placeholders

url-loader

Loading images differs from file-loader in that you can configure whether to convert base64 URIs. The advantage is that HTTP requests can be reduced

  1. download

npm install url-loader -D

  1. Configured to use
module: {
    // Module configuration
    rules: [{test: /.(png|jpe? g|gif)$/i.// Parse the image
        use: {
          loader: 'url-loader'.options: {
            name: '/img/[name].[hash:6].[ext]' // /img/ Original file name, 6-bit hash. Original suffix}}}]}Copy the code

All images are base64 by default

  • Configure the transform Base64 condition
module: {
    // Module configuration
    rules: [{test: /.(png|jpe? g|gif)$/i.// Parse the image
        use: {
          loader: 'url-loader'.options: {
            name: '/img/[name].[hash:6].[ext]'.// /img/ Original file name, 6-bit hash. Original suffix
            limit: 230 * 1024 // Base64 is converted only for graphs smaller than 230KB. 8K is configured in general projects}}}]}Copy the code

asset module

Webpack5 provides a built-in resource module to replace the preceding Loader by setting the module type

  • Asset/Resource sends a separate file and exports the URL. This was previously implemented using file-loader.
  • Asset /inline exports the data URI of a resource. This was previously implemented using urL-loader.
  • Asset /source Exports the source code for the resource. This was previously implemented using raw-loader.
  • Asset automatically selects between exporting a data URI and sending a separate file. Previously, the urL-loader was used and the resource volume limit was configured.

The use of the asset/resoource

  module: {
    // Module configuration
    rules: [{test: /.(png|jpe? g|gif)$/i.// Parse the image
        type: 'asset/resource'}}]Copy the code
  • Configuring the output file Name

Method 1: Unified global configuration

  output: {
    filename: 'build.js'.path: path.resolve(__dirname, 'build'),
    assetModuleFilename: 'imgs/[name].[hash:6][ext]' // Set the name of the asset Module file.
  },
  module: {
    // Module configuration
    rules: [{test: /.(png|jpe? g|gif)$/i.// Parse the image
        type: 'asset/resource',}}]Copy the code

Method 2: Local configuration

module: {
    // Module configuration
    rules: [{test: /.(png|jpe? g|gif)$/i.// Parse the image
        type: 'asset/resource'.generator: {
          filename: 'img/[name].[hash:6][ext]'}}}]Copy the code

The use of the asset

Default: files less than 8KB will be treated as inline module type, otherwise will be treated as resource module type

module: {
    // Module configuration
    rules: [{test: /.(png|jpe? g|gif)$/i.// Parse the image
        type: 'asset'}}]Copy the code
  • Modify conversion conditions
module: {
    // Module configuration
    rules: [{test: /.(png|jpe? g|gif)$/i.// Parse the image
        type: 'asset'.parser: {
          dataUrlCondition: {
            maxSize: 50 * 1024 // 50kb}}}]}Copy the code