The difference between url-loader and file-loader

file-loader

File-loader returns the url of the image

url-loader

The url-loader can process the picture by the limit attribute. When the picture is smaller than the limit (unit: byte), it will be converted to base64. When the limit is greater than the limit, the file-loader is called to process the picture.

The same point: all files, font icons and other files are processed in webpack.
Relationship: url-loader encapsulates file-loader, but url-loader does not depend on file-loader.

Js picture to base64

There is a list in the project. The image is looped through v-for. If the url is placed in js, it cannot be converted to base64. The url-loader will only compile images in html and css. You can import images by import, receive them with a variable, and then render the variables in v-for.

import beijing from './static/images/4.png';
import shanghai from './static/images/5.png';
import shenzhen from './static/images/6.png';
[
    {
        Name: 'Beijing',
        src: beijing
    },
    {
                 Name: 'Shanghai',
        src: shanghai
    },
    {
                 Name: 'Shenzhen',
        src: shenzhen
    }
]

Intelligent Recommendation

webpack.config.js configures url-loader and file-loader

If the url-loader exceeds imit, it will fallback, so the file-loader configuration must be written in the fallback. If you finish writing the url-loader configuration and then write the file-loader as...

WebPack Package Picture URL-Loader File-Loader

npm install --save-dev [email protected] Configuration in WebPack.config.js npm install --save-dev [email protected] Then add it in WebPack.config.js publicPath: 'dist/'...

Handwritten webpack's babel-loader, url-loader, file-loader

Custom loader...

Third, Loader ---- File-Loader and Url-Loaderr (loader loaded with pictures)

1、file-loader ** In actual development, the introduction of pictures generally have two, IMG and Background-Image, 1.1, Background-Image Settings Background The class name Hulu1 here is changed to Hul...

webpack learning file-loader, url-loader, css-loader

Installation webpack Webpack command execution npx command that the implementation of the project in webpack node_modules commands executed directly webpack otherwise, you will need to install a globa...