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

tags: webpack front end

1、file-loader

** In actual development, the introduction of pictures generally have two, IMG and Background-Image,

1.1, Background-Image Settings Background

1111111
The class name Hulu1 here is changed to Hulu;

Then install File-Loader

method:npm install file-loader -D

Configuration:

1.2 IMG picture introduction

Note that when IMG is introduced, you must use the picture as a module like this, first import it to IMG.SRC

The configuration method is the same as Background-Image, does not need to be configured.

Then execute the command, two pictures are packaged under the build folder, and WebPack will automatically find the packaged file path and do not need to be modified.

2、url-loader

Like File-Loader, it can convert a smaller image of a file to a Base64 bit URI.
Use mode and configuration as File-Loader basically
Just change file-loader to url-loader, right, premise is also installed URL-Loader

2.1 how to convert a small picture into a Base64 bit URI?

3, how to set the file storage path

Intelligent Recommendation

The difference and use of url-loader and file-loader

Webpack is written in JS and runs in a node environment, so by default, only the dependencies between JS will be processed when webpack is packaged! ! ! If you don’t believe it, you can create a...

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...

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...