webpack core concepts _ (Chapter III) _ using the loader packaged static resources (Picture chapter)

Use loader packaged static resources (Picture chapter)

On a picture we see webpack the name was packaged into a long string.

If we do not want to change the name of the picture, how do?
In this case we need to do some additional configuration of the loader.
When using the loader, you can configure some parameters in the configuration options of a term
such as the name of hope in the form of packaging produced with the same name before the picture, and also the same suffix

      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: "file-loader",
          options: {
            name: '[name].[ext]'
          }
        }
      },

After the package so that we will not become the name of the
name: '[name].[ext]'syntax of this configuration, we called the placeholder, that is a placeholder for the
file-loader corresponding placeholders are many:

1. [Ext]: the original file suffixes
2. [Name]: represents the name of the original file
3. [hash]: representing packed out the hash value of the file name: '[name]_[hash].[ext]'after it is packaged
   
   that is not configured, the default package name is a hash value

We can see the package files by default in the dist document, we want to pack the next dist next image file, how to do?
Here you can configure the look outputPath: 'images/', meaning it encounters the end of the module jpg, packing time, this will generate a package file to images files in the dist directory folder

url-loader

url-loader work can be done in addition to the file-loader, you can also do some extra things, installationnpm install url-loader -D

      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: "url-loader",
          options: {
            name: '[name]_[hash].[ext]',
            outputPath: 'images/'
          }
        }
      },

We found that package does not generate images

but index.html can run successfully in the packaging generated in index.js
when using url-loader package of the picture, it will convert the picture into a string base64, and then directly on the package generated the index.js file, rather than generating a single file, but this use is unreasonable, pictures packaged in js file js actually loads well, do not have to request additional pictures of address, a provincial http request, but the problem is that if this image file is particularly large, packaged generate js file will be particularly special large, this js loading time will be very long, so what is then a very long time on the page will not be displayed.
So the best way to use url-loader is, when the picture is very small, for example 1,2KB, then the image of the package in the form of base64 js file is a very good choice, there is no need to make a small picture to send back a http request, a waste of time, assuming that the picture very large, like the file-loader, like the picture to the next package dist file.
To achieve this practice how to do it? Configuration parameters in Options limit: 2048, meaning if picture exceeds 2048 bytes, it will be like file-loader as packaged under the dist directory, generate a picture, if less than 2048 bytes, it will direct the picture becomes base64 the string into a file generated index.js
test: limit: 20480packaging npm run bundle:

limit: 204800packaging npm run bundle:

does not generate image files

but you can see in the picture index.js in base64 string of
webpack official website DOCUMENTATION ----> LOADERS in file-laoder and url-loader View Details