Webpack 3.X learning image processing

Image processing in CSS
Create a new images directory under the src directory, and put the pictures in the images folder; add a div tag to the index.html file:

/src/index.html:

<div id=”image”></div>
Write css and add a background image to the div tag just added:

/src/css/index.css:

#image{
background: url(‘../images/webpack.jpg’);
width: 497px;
height: 270px;
}
Install loader:

npm install –save-dev file-loader url-loader
Configure the loader in webpack.config.js:

module:{
rules:[
{
test:/\.(png|jpg|gif)$/,
use:[{
loader:’url-loader’,
options:{
limit:500000,
outputPath:’images/’
}
}]
}
]
}
url-loader and file-loader
file-loader: solve the problem of reference path;

url-loader: If there are many pictures, a lot of http requests will be sent, which will reduce page performance. The url-loader will encode the pictures introduced to generate dataURL; url-loader will provide a limit parameter (unit B), which is less than the limit byte of pictures Will be converted to dataURL, if it is larger than limit, file-loader will be used for copy; outputPath is the path after the image is separated;

Simply speaking, the relationship between the two, url-loader encapsulates file-loader, url-loader does not depend on file-loader, that is, when using url-loader, you only need to install url-loader instead of file-loader;

Image path processing in CSS
Use the extract-text-webpack-plugin to separate the CSS files, but the image path in the CSS is not correct, here we use publicPath to solve it;

PublicPath is in the output option of the webpack.config.js file, and its main function is to process static file paths;

Declare a website object:

const website = {
publicPath:’http://localhost:1608/’
}
The IP and port here must be consistent with the IP and port configured by devServer.

Configure output selection:

output:{
path: path.resolve(__dirname,’dist’),
filename:'[name].js’,
publicPath: website.publicPath
}
Image processing in HTML
In webpack, I don’t like you to use the tag <img> to import images, but the front end is particularly keen on this way of writing. Chinese people have also developed one for this: html-withimg-loader. He can handle the problem of introducing images into html very well.

Install loader:

npm install –save-dev html-withimg-loader
Configure the loader in webpack.config.js:

module:{
rules:[
{
test:/\.(htm|html)$/,
use:[“html-withimg-loader”]
}
]
}
Reference address:

https://github.com/zhuangZhou/webpack_demo
http://jspang.com/2017/09/16/webpack3-2/#15webpackbabel

Please indicate：Free Editor Online Photoshop » Webpack 3.X learning image processing