1. Preface
If we want to introduce images (including img's src and background's url). When we develop based on webpack, we will encounter some problems introducing images.
One of them is the problem of referencing paths. Take the background style using url to introduce the background image, we all know that webpack will eventually package each module into a file, so the url path in our style is relative to the entry html page, not relative to the path where the original css file is located. This will lead to the failure of image introduction. This problem is solved with file-loader. File-loader can parse the URL introduction in the project (not limited to CSS), copy the image to the corresponding path according to our configuration, and then modify the packaged file reference path to make it point to the correct file.
In addition, if there are many pictures, many http requests will be sent, which will reduce the performance of the page. This problem can be solved by url-loader. The url-loader will encode the imported image and generate dataURl. It is equivalent to translating image data into a string of characters. Then package this string of characters into a file, and finally you only need to introduce this file to access the picture. Of course, if the image is large, encoding will consume performance. Therefore, the url-loader provides a limit parameter. Files smaller than limit bytes will be converted to DataURl. File-loader will be used for copying if they are larger than limit.
What is the relationship between url-loader and file-loader? To put it simply, the url-loader encapsulates the file-loader. The url-loader does not depend on file-loader. That is, when using the url-loader, you only need to install the url-loader, and you don’t need to install the file-loader, because the url-loader has a file-loader built-in. Through the above introduction, we can see that url-loader work is divided into two situations: 1. The file size is smaller than the limit parameter, the url-loader will convert the file to DataURL; 2. The file size is larger than the limit, the url-loader will call file-loader for processing, and the parameters will be directly passed to the file-loader. Therefore, we only need to install url-loader.
Recommended documentation:
file-loader: /webpack-contrib/file-loader
url-loader: https:///article/
Parameters in
The above mentioned parameters of url-loader and file-loader parameters, so what is the concept of loader parameters? The loader parameters use customization of the working characteristics of the loader when processing files. Let’s take the url-loader as an example to introduce the parameters in the loader of webpack.
First, let’s take a look at the following example:
= {
// Entry file path, __dirname is the root directory entry: __dirname + '/src/',
// Package and generate files output: {
path: __dirname + '/output',
filename: ''
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.jpeg$/,
use: [
{
loader: 'url-loader',
options: {
limit: '1024'
}
},
]
}
]
}
}
Among them, the options attribute in the configuration of the url-loader represents the parameters of the url-loader, and there is also an equivalent way to write it:
{
test: /\.jpeg$/,
use: 'url-loader?limit=1024
}
If there are multiple parameters, use ‘&’ to connect them. Similar to the parameters in http request. As mentioned earlier, the limit parameter tells the url-loader to encode the file and return the DataURL when the file is less than how many bytes. In addition, url-loader has some parameters for file-loader. We know that the function of file-loader is to copy files to other directories. The file-loader provides a series of parameters that allow us to customize parameters such as output files, file name rules, publish paths, etc. The following are the parameters.
-loader parameters
Let's look at the configured code first:
= {
// Entry file path, __dirname is the root directory entry: __dirname + '/src/',
// Package and generate files output: {
path: __dirname + '/output',
filename: ''
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.jpeg$/,
use: 'url-loader?limit=1024&name=[path][name].[ext]&outputPath=img/&publicPath=output/',
}
]
}
}
Here are 4 parameters: limit, name, outputPath, and publicPath. Among them, limit has been explained. File-loader is related to name, outputPath and publicPath. The following are the three parameters
name represents the output file name rule. If this parameter is not added, the output is the default value: file hash. Adding [path] means that the relative path of the output file is the same as the relative path of the current file, and adding [name].[ext] means that the name and extension of the output file are the same as the current one. After adding the parameter [path], the path to the referenced file in the packaged file will also be added with this relative path.
outputPath represents the output file path prefix. The image will be packaged into the specified output folder after the url-loader package. But we can specify the path of the image in the output folder. For example, outputPath=img/, when the image is packaged, a new folder named img will be created (if not) in the output folder and the image will be placed inside.
publicPath represents the path prefix of the referenced file in the packaged file. If your image is stored on the CDN, then you can add this parameter when you go online, and the value is the CDN address, so that the resource reference path after the project goes online can point to the CDN.
4. Install url-loader
npm install --save-dev url-loader
/KIDFUCKER/
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.