Detailed explanation of the image of WebPack – Enhanced File-Loader: URL-Loader

This article describes URL-Loader (enhanced file-loader);

URL-Loader effect: selectively selective small The picture is encoded into the base64 format writes into the page; thus reducing server requests. Optimize performance.

URL-Loader Solved Problem:

If the picture is large, there will be a lot of HTTP requests, which will reduce the page performance. URL-Loader will encode the introduced picture to generate DataURL. It is equivalent to translating the picture data into a string of characters. Then pack this string to the file, and eventually you only need to introduce this file to access the picture. Of course, if the picture is large, the encoding will consume performance. Therefore, URL-Loader provides a LIMIT parameter, which is smaller than the LIMIT byte will be converted to DataURL, which is greater than LIMIT, which uses File-Loader for Copy.

What is the relationship between URL-LOADER and FILE-LOADER?

Inssensus, URL-Loader encapsulates File-Loader. URL-Loader does not rely on File-Loader, you only need to install URL-Loader when using URL-Loader, you do not need to install File-Loader, because Url-Loader has built-in file-loader.

Through the above introduction, we can see that both of the URL-Loader works:

1. File size is less than the limit parameter, url-loader will turn the file to DataURL;

2. File size is greater than LIMIT, URL-Loader calls File-Loader for processing, and parameters will also pass directly to File-Loader. So we only need to install URL-LOADER.


Code and project catalogIt is the previous “Webpack introduction picture”.

URL-Loader can be seen as an enhanced version of File-Loader.

URL-Loader encodes the picture into the base64 format to write into the page, thereby reducing server requests.

Mount URL-Loader

NPM I -D URL-Loader

Configure WebAPCK. Config.js
 Perform NPM Run Build   Find the build's index.html page under the DIST directory. In the console of the browser, you can see that the image is loaded into the page in base64 format. 

Now we do some optimization, if the picture size is less than 50kB, loaded with base64 in the format of Base64, otherwise loading it in image address.


Supplement: Simple Introduction Url-Loader configuration

Actually, it is similar to File-Loader, URL-Loader will Follow the configuration that is smaller than a certain size in the form of dataURL in DataURL.

The reference method is the same as above: the configuration of Loader is as follows: 详解webpack之图片引入-增强的file-loader:url-loader

{test: /\. (PNG|JPG|GIF) $/ , Loader: ‘URL-LOADER? LIMIT = 8000 & Name = IMG / [Name] – [Hash: 5]. [EXT]’, // less than 8KB picture storage in DataURL} 详解webpack之图片引入-增强的file-loader:url-loader

Supplement: How to pack pictures in the HTML file?

First installation of the corresponding Loader:

$ npm install html-withimg-loadinger –save-dev1

  Doing the corresponding configuration in WebPack.config.js:  

Module: {Loaders: [{Test: /\.html /, loader: ‘HTML-WITHIMG -Loader ‘}]}

  Import' is introduced in the JS file of the inlet. Index.html ';  
The above is all the content of this article, I hope to help everyone’s learning, I hope that everyone will support Tumi Clouds.
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment