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:Photoshop Online Free Editor » Webpack 3.X learning image processing

comment (0) share it ()

comment Grab the sofa

Login to comment! If you already have an account, please first log in,No please registered or

Photo editing search facebook back to the homepage