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

原文地址：https://www.jb51.cc/wenti/3286334.html

6.webpack4打包图片资源

4.1执行步骤

4.2 代码段

相关推荐