Webpack is a module packaging tool. In order to improve development efficiency, we use development frameworks such as React and Vue, Typescript and Flow, CSS preprocessors such as Scss/Sass/Less/Stylus, and some new syntax features such as ES6. However, these are not directly recognized by browsers. While manual compilation and packaging can be tedious and cumbersome, Webpack automatically parses, compiles, and packages these complex, massive dependencies into tiny, browser-aware files.

Why loading an image in JavaScript does not recognize the image path directly

Because in Webpack, except js files can be identified and packaged directly, other types of files (CSS, images, etc.) need to be loaded and packaged through a specific loader, while images need to use file-loader or URL-loader.

When an image path is introduced in JavaScript, WebPack doesn’t know it’s an image, so it needs to load the image resource in with require and then add it to the object as an image path.

Url-loader and file-loader have the same functions, except that url-loader can convert images smaller than a certain size (which can be customized) to base64 format.

The scene used for the picture

The installation file – loader

npm i file-loader

yarn add file-loader

// webpack.conf.js

module.exports={
    module:{
        rules:[
            {
                test: /\.(png|jpg|gif|svg)$/,
                use: ['file-loader'}]}}Copy the code

  • When used in CSS, file-loader automatically identifies the image path in CSS code and packages the image to the specified path

// html
<img src="./images/bg_img.png">

// css
{ background: url("./images/bg_img.png"); }Copy the code

  • Used in JavaScript

// js
let uri = require('./images/bg_img.png');

let img = document.querySelector('img');
img.src = uri;

// vue
<img :src="require('./images/bg_img.png')">
<div :style="{backgroundImage: 'url(' + require('./images/bg_img.png') + ')'}"< span style = "box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; font-size: 14px! Important; word-break: inherit! Important;Copy the code

url-loader

Url-loader is basically the same as file-loader. Therefore, url-loader can be used instead.

Url-loader can also convert images smaller than a certain size to base64 format.

npm i url-loader

yarn add url-loader

// webpack.conf.js

module.exports={
    module:{
        rules:[
            {
                test: /\.(png|jpg|gif|svg)$/,
                use: ['url-loader'],
                options: {
                    name: './images/[name].[ext]'.limit: 1024}}]}}Copy the code

The limit attribute converts files smaller than 1024B into Base64, and files larger than 1024B are packaged as file-loader.

Package in file-loader mode:

Package in url-loader mode:



If the limit attribute is not written, everything is not packaged in urL-loader mode

conclusion

  1. Url-loader or file-loader is used to package images
  2. When using images in the CSS, you can package image paths directly. When using images in js, use require to load the image resource, and then pass the path to the object
  3. Url-loader converts the image format to Base64 (recommended for images of small sizes, such as ICONS, to reduce HTTP requests). However, if the image is too large, it is not recommended to use it, which will cause too large data and slow loading.)