Webpack Processing media files (picture/video and audio)

Webpack will eventually package each module into a file, so the URL path in our style is relative to the HTML page of the portal,

This problem is solved with File-loader, File-loader can parse the project URL introduction (not limited to CSS), according to our configuration, the image is copied to the corresponding path, and according to our configuration, modify the package file reference path, so that it points to the correct file.

In addition, if there are more pictures, many HTTP requests will be sent, which will degrade the page performance. This problem can be solved by url-loader. Url-loader will encode the introduced image and generate the Dataurl. Equivalent to translating the image data into a string of characters. Then package this string of characters into a file, and eventually you will need to introduce this file to access the image. Of course, if the picture is large, the encoding consumes performance. So url-loader provides a limit parameter, and a file smaller than the limit byte is converted to Dataurl, and a copy is also used with file-loader greater than limit.

Url-loader There are two types of work : 1. If the file size is less than the limit parameter, Url-loader will convert the file to dataurl;2. The file size is greater than Limit,url-loader will call file-loader for processing, and the parameters will be passed directly to File-loader.

            {                test:/\. (PNG|JPG|GIF|SVG|EOT|TTF|WOFF|WOFF2) $/,                //loader: ' url-loader?name=images/[name].[ EXT] ',                loader: ' Url-loader ',                options: {                  limit:10,                  name: ' imgs/[name].[ EXT] '                }            },            {                test:/\. ( mp3) (\?. *) $/,                loader: ' Url-loader ',                options: {                  name: ' audios/[name].[ EXT] ',                  limit:10                }            }        

　　

Webpack Processing media files (picture/video and audio)