{
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
},

You can see that the url-loader is used for image compilation, and some people use file-laoder, so what is the difference between the two? Which one should I use?

url-loader:

Function: The function of url-loader is similar to that of file-loader, but when the file size (unit byte) is lower than the specified limit, it can return a DataURL.

If there are many pictures, many http requests will be sent, which will reduce page performance. The url-loader will encode the imported pictures and generate dataURl. It is equivalent to translating the picture data into a string of characters. Then pack this string of characters into a file, and finally only need to import this file to access the picture. Of course, if the picture is large, encoding will consume performance. Therefore, url-loader provides a limit parameter. Files smaller than limit bytes will be converted to DataURl, and files larger than limit will be copied using file-loader.

file-uploader:

Function: By default, the file name of the generated file is the MD5 hash value of the file content and will retain the original extension of the referenced resource. Generate the file file.png, output it to the output directory and return the public URL.

"/public/path/0dcbbaa7013869e351f.png"

What is the relationship between url-loader and file-loader?

Simply put, url-loader encapsulates file-loader. The url-loader does not depend on the file-loader, that is, when using the url-loader, you only need to install the url-loader, not the file-loader, because the url-loader has a built-in file-loader.

Through the above introduction, we can see that url-loader works in two situations:
1. If the file size is less than the limit parameter, url-loader will convert the file to DataURL;
2. If the file size is larger than the limit, the url-loader will call the file-loader for processing, and the parameters will also be directly passed to the file-loader. So we only need to install url-loader.