• 6.webpack4打包图片资源

    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

    1. const { resolve } = require("path");
    2. const HtmlWebpackPlugin = require("html-webpack-plugin");
    3.  
    4. module.exports = {
    5.     entry: "./src/index.js",
    6.     output: {
    7.         filename: "built.js",
    8.         path: resove(__dirname,"build")
    9.     },
    10.     module: {
    11.         rules: [
    12.             {
    13.                 test: /\.css$/,
    14.                 use: ["style-loader","css-loader"]
    15.             },
    16.             {
    17.                 test: /\.less$/,
    18.                 use: ["style-loader","css-loader","less-loader"]
    19.             },
    20.             {
    21.                 // 使用url-loader解决webpack无法处理css样式中的url地址
    22.                 // url-loader模块依赖file-loader模块
    23.                 // 处理图片资源
    24.                 test: /\.(jpg|jpeg|png|gif)$/
    25.                 loader: "url-loader",
    26.                 options: {
    27.                     limit: 8 * 1024,
    28.                     name: '[hash:10][ext]'
    29.                     // 关闭url-loader默认的es6模块化解析，改为commonjs解析
    30.                     esModule: false
    31.                 }
    32.             },
    33.             {
    34.                 // 使用html-loader处理html文件中的img图片（负责引入html中的img，从而能被url-
    35.                 // loader处理）
    36.                 // 注意：使用html-loader需要将url-loader中的配置项esModule改成false，将
    37.                 // url-loader改为commonjs解析，而不是默认的es6模块化解析，因为html-loader
    38.                 // 使用的是commonjs解析
    39.                 test: /\.html$/,
    40.                 loader: "html-loader"
    41.             }
    42.         ]
    43.     },
    44.     plugins: [
    45.         new HtmlWebpackPlugin({
    46.             template: "./src/index.html"
    47.         })
    48.     ]
    49. }

    2）index.less

    1. #box1 {
    2.     width: 100px;
    3.     height: 100px;
    4.     background-image: url('./vue.jpg');
    5.     background-repeat: no-repeat;
    6.     background-size: 100% 100%;
    7.     background-color: pink;
    8. }
    9.  
    10. #box2 {
    11.     width: 200px;
    12.     height: 200px;
    13.     background-image: url('./react.png');
    14.     background-repeat: no-repeat;
    15.     background-size: 100% 100%;
    16.     background-color: skyblue;
    17. }
    18.  
    19. #box3 {
    20.     width: 300px;
    21.     height: 300px;
    22.     background-image: url('./angular.jpg');
    23.     background-repeat: no-repeat;
    24.     background-size: 100% 100%;
    25.     background-color: yellowgreen;
    26. }

    3）index.js

    import './index.less';

    4）index.html

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <div id="box1">div>
    11.     <div id="box2">div>
    12.     <div id="box3">div>
    13.     <img src="./angular.jpg" alt="angular">
    14. body>
    15. 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

  • 相关阅读:
    MySQL的MVCC多版本并发控制
    C++面试八股文：C++中，函数的参数应该传值还是传引用？
    Vue (十四) --------- vue-router (路由)
    东芝Z750的画质真实吗？适合看纪录片吗？
    八股文-Vue篇（持续更新）
    Spring源码：Bean生命周期（终章）
    Android笔记
    C++中静态成员和非静态成员
    vscode远程连接服务器+Xming：图形化界面
    每天五分钟机器学习：经典的机器学习PCA的核心——特征分解技术
  • 原文地址：https://blog.csdn.net/weixin_43893483/article/details/126489959