Webpack Study notes -2-file-loader and Url-loader

I. Preface

If we want to introduce pictures on the page (including the IMG src and background URLs). When we are developing based on Webpack, we encounter some problems when we introduce pictures.

One of these is the problem of referencing a path. Take background style with a URL to the background, we all know that Webpack will eventually package each module into a file, so the URL path in our style is relative to the portal HTML page, not relative to the path where the original CSS file resides. This will cause the picture to fail to introduce. 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.

What is the relationship between Url-loader and File-loader? Jane replied that Url-loader encapsulated the File-loader. Url-loader does not rely on file-loader, that is, when using Url-loader, only need to install Url-loader, do not need to install File-loader, because Url-loader built-in File-loader. Through the above introduction, we can see that Url-loader work in two situations: 1. 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 parameters will be passed directly to File-loader 。 So we just need to install Url-loader.

Recommended Documents:

File-loader:https://github.com/webpack-contrib/file-loader

Url-loader:http://www.cnblogs.com/ghost-xyx/p/5812902.html

Two. Parameters in the loader

The parameters of the Url-loader and the File-loader parameters are mentioned above, so what is the concept of loader parameters? The loader parameter is used when working with files from the definition loader. The following is an example of Url-loader, which describes the parameters in the Webpack loader.

First look at the following example:

2. Module.exports = {
4. //Ingress file path, __dirname is the root directory
6. Entry: __dirname + '/src/main.js ',
8. //Package build file
10. Output: {
12. Path: __dirname + '/output ',
14. FileName: ' main.js '
16. },
20. Module: {
22. Rules: [
24. {
26. Test:/\.css$/,
28. Use: [' Style-loader ', ' Css-loader ']
30. },
32. {
34. Test:/\.jpeg$/,
36. Use: [
38. {
40. Loader: ' Url-loader ',
42. Options: {
44. Limit: ' 1024x768 '
46. }
48. },
50. ]
52. }
54. ]
56. }
58. }

Where the Options property in Url-loader's configuration represents the Url-loader parameter, there is an equivalent notation:

1. {
2. Test:/\.jpeg$/,
3. Use: ' url-loader?limit=1024
4. }

If there are multiple parameters, use ' & ' to connect them. Similar to the parameters in the HTTP request. As described earlier, the limit parameter is to tell Url-loader that the file is encoded and returned to Dataurl when the file is less than the number of bytes. In addition, Url-loader has some parameters for File-loader. We know that the role of File-loader is to copy files to other directories. File-loader provides a series of parameters that allow us to customize parameters such as output files, file name rules, publishing paths, and so on. These parameters are described below.

Three. Parameters of the Url-loader

First look at the configured code:

2. Module.exports = {
4. //Ingress file path, __dirname is the root directory
6. Entry: __dirname + '/src/main.js ',
8. //Package build file
10. Output: {
12. Path: __dirname + '/output ',
14. FileName: ' main.js '
16. },
20. Module: {
22. Rules: [
24. {
26. Test:/\.css$/,
28. Use: [' Style-loader ', ' Css-loader ']
30. },
32. {
34. Test:/\.jpeg$/,
36. Use: ' url-loader?limit=1024&name=[path][name].[ ext]&outputpath=img/&publicpath=output/',
38. }
40. ]
42. }
44. }

There are 4 parameters involved: limit, name, OutputPath, Publicpath. Where limit has been stated. File-loader is related to name, OutputPath, and Publicpath. Here's an explanation of these 3 parameters

The name represents the output file name rule, and if you do not add this parameter, the default value is the output: file hash. Plus [path] means that the relative path to the output file is the same as the current file relative path, plus [name]. [Ext] indicates that the output file has the same name and extension as the current one. With this parameter of [path], the path to the referenced file in the packaged file is added with this relative path.

The OutputPath represents the output file path prefix. The pictures are packaged in a Url-loader package to the specified output folder. But we can specify the path of the picture under the output folder. For example outputpath=img/, when the picture is packaged, it will be created under the output folder (if not) a folder called IMG, put the picture inside.

Publicpath represents the path prefix of the referenced file in the package file, if your picture is stored on a CDN, you can add this parameter to the CDN address when you go online, so that the resource reference path after the project is launched will point to the CDN.

Four. Installing Url-loader

1. NPM Install--save-dev Url-loader

Five. Demo

Https://github.com/KIDFUCKER/webpack-demo.git

Webpack Study notes -2-file-loader and Url-loader