handle image resources

In the past, when Webpack4 was used, we processed image resources through file-loader and url-loader.

Now Webpack5 has built-in the functions of these two loaders into Webpack, and image resources can be processed with simple configuration.

Configuration

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  module: {
    rules: [
      {
        // Used to match files ending with .css
        test: /\.css$/,
        // The order of Loader execution in the use array is from right to left
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader'],
      },
      {
        test: /\.s[ac]ss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.styl$/,
        use: ['style-loader', 'css-loader', 'stylus-loader'],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: 'asset',
      },
    ],
  },
  plugins: [],
  mode: 'development',
};

Add image resources

• src/images/1.jpeg
• src/images/2.png
• src/images/3.gif

Use image resources

src/less/index.less

.box2 {
  width: 100px;
  height: 100px;
  background-image: url('../images/1.jpeg');
  background-size: cover;
}

src/sass/index.sass

.box3
width: 100px
height: 100px
background-image: url("../images/2.png")
background-size: cover

src/styl/index.styl

.box5
width 100px
height 100px
background-image url("../images/3.gif")
background-size cover

Run command

npx webpack

Open index.html Page viewing effect

Output resource situation

If you check the dist directory at this time, you will find that there are three more image resources.

Because Webpack will output all packaged resources to the dist directory.

There is no additional output of style resources because after being processed by style-loader, the style resources are packaged into main.js.

Optimize image resources

Convert images smaller than a certain size into data URI format (Base64 format).

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  module: {
    rules: [
      {
        // Used to match files ending with .css
        test: /\.css$/,
        // The order of Loader execution in the use array is from right to left
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader'],
      },
      {
        test: /\.s[ac]ss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.styl$/,
        use: ['style-loader', 'css-loader', 'stylus-loader'],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // Images smaller than 10kb will be processed with base64
          },
        },
      },
    ],
  },
  plugins: [],
  mode: 'development',
};

• Advantages: Reduce the number of requests
• Disadvantages: The size becomes larger

At this time, there are only two image files output, and one image is built into JS in the form of data URI.

Note: You need to clear the files generated by the last packaging and then re-pack to achieve the effect.