4.1执行步骤
1）创建相关文件，并引入demo中使用到的图片资源文件，如下图红框部分
2）下载相关依赖
url-loader@3.0.0、file-loader5.0.2、html-loader@0.5.5
url-loader的使用依赖于file-loader，所以也需要下载file-loader
①url-loader：处理css、字体库等文件
②html-loader：处理html文件中的img图片，负责引入img从而能够被url-loader进行处理
通过url-loader可以对css文件中使用到的图片进行打包，如backgroud-image属性使用到的背景图片。
通过html-loader、url-loader可以处理html图片，这里要注意：html-loader采用commonjs解析，而url-loader默认采用es6模块化，要想使用html-loader需要将url-loader采用的解析方式改成commonjs。
4.2 代码段
1）webpack.config.js
const { resolve } = require("path");const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {entry: "./src/index.js",output: {filename: "built.js",path: resove(__dirname,"build")},module: {rules: [{test: /\.css$/,use: ["style-loader","css-loader"]},{test: /\.less$/,use: ["style-loader","css-loader","less-loader"]},{// 使用url-loader解决webpack无法处理css样式中的url地址// url-loader模块依赖file-loader模块// 处理图片资源test: /\.(jpg|jpeg|png|gif)$/loader: "url-loader",options: {limit: 8 * 1024,name: '[hash:10][ext]'// 关闭url-loader默认的es6模块化解析，改为commonjs解析esModule: false}},{// 使用html-loader处理html文件中的img图片（负责引入html中的img，从而能被url-// loader处理）// 注意：使用html-loader需要将url-loader中的配置项esModule改成false，将// url-loader改为commonjs解析，而不是默认的es6模块化解析，因为html-loader// 使用的是commonjs解析test: /\.html$/,loader: "html-loader"}]},plugins: [new HtmlWebpackPlugin({template: "./src/index.html"})]}
2）index.less
#box1 {width: 100px;height: 100px;background-image: url('./vue.jpg');background-repeat: no-repeat;background-size: 100% 100%;background-color: pink;}#box2 {width: 200px;height: 200px;background-image: url('./react.png');background-repeat: no-repeat;background-size: 100% 100%;background-color: skyblue;}#box3 {width: 300px;height: 300px;background-image: url('./angular.jpg');background-repeat: no-repeat;background-size: 100% 100%;background-color: yellowgreen;}
3）index.js
import './index.less';
4）index.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div id="box1"></div><div id="box2"></div><div id="box3"></div><img src="./angular.jpg" alt="angular"></body></html>
图片自己去替换
总结：
① url-loader模块依赖file-loader，要想使用url-loader处理css中的url图片需要先下载file-loader、url-loader模块，再对url-loader进行配置
② 通过配置url-loader中对的limit，可以设置对limit范围内大小的图片进行base64压缩处理（上文中设置的是8kb内的图片），大于的则会原样输出。进行了base64压缩处理的图片可以在built.js中找到对应的代码段。使用limit的优点：可以减少请求数量（减轻服务器压力）；缺点：进行base64压缩后的图片体积会变大。
③ 通过配置url-loader中的name为[hash:10][ext]，可以对经过url-loader处理的图片进行hash的截取前十位，[ext]代表图片的后缀原样输出。
④ 在使用html-loader处理html的img图片，负责引入img从而能被url-loader进行处理时，存在html-loader的解析方式为commonjs解析，而url-loader使用的是ES6模块化解析，此时可以通过在url-loader配置esModule: false 将url-loader默认的解析方式（es6模块化）关闭，此时url-loader的解析方式会变成commonjs
