6 ---> webpack打包图片资源

新建文件夹
在这里插入图片描述

下载三张图片
在这里插入图片描述

分别大小为:
0.jpg为55kb,1.jpg为28kb,2.jpg为2.49kb
index.html

<!--
 * @Author: zyl
 * @Date: 2021-06-23 14:30:40
 * @LastEditors: zyl
 * @LastEditTime: 2021-06-24 09:58:53
-->
<!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>webpack</title>
</head>
<body>
  <div id="box1"></div>
  <div id="box2"></div>
  <div id="box3"></div>
</body>
</html>

index.js

/*
 * @Author: zyl
 * @Date: 2021-06-24 09:59:03
 * @LastEditors: zyl
 * @LastEditTime: 2021-06-24 10:00:37
 */
import './index.less';

index.less
#box1 {
  height: 100px;
  height: 100px;
  background-image: url(./0.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
#box2 {
  height: 200px;
  height: 200px;
  background-image: url(./1.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
#box3 {
  height: 300px;
  height: 300px;
  background-image: url(./2.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

webpack.config.js

/*
 * @Author: zyl
 * @Date: 2021-06-24 10:01:07
 * @LastEditors: zyl
 * @LastEditTime: 2021-06-24 10:08:49
 */
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })

  ]
}

这时运行webpack,抛错
在这里插入图片描述

错误原因是less-loader的版本过高,当前是10+,降低版本打到7.3

F:\study\webpack>  npm install less-loader@7.3.0 --save-dev

重新webpack,发现依旧抛错
在这里插入图片描述

这一次抛错的原因,查看webpack.config.js就知道没有对图片资源进行处理,只对css进行处理了
,又由于css中引入了图片资源,导致上诉抛错

这里黄色部分是一个警告,提示我们,mode需要设置
webpack.config.js添加一行

mode: 'development'

对图片进行处理
添加配置,完整的webpack.config.js代码

/*
 * @Author: zyl
 * @Date: 2021-06-24 10:01:07
 * @LastEditors: zyl
 * @LastEditTime: 2021-06-24 10:36:08
 */
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        //use使用数组是需要多个loader处理
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      },
      {
        //处理图片资源
        test: /\.(jpg|png|gif)$/,
        //使用一个loader的时候可以直接写,不用use
        //需要下载两个包 ,url-loader,file-loader
        loader: 'url-loader',
        options: {
          //图片大小小于8kb,就会被base64处理,一般是项目中的小图片,这里不一定是8,可以根据实际情况处理
          //优点:减小请求数量(减轻服务器压力)
          //缺点:图片体积会变大(文件请求速度变慢)
          limit: 8 * 1024
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })

  ],
  mode: 'development'
}

下载依赖

F:\study\webpack>cnpm i url-loader file-loader -D 

重新运行webpack
发现打包的图片
在这里插入图片描述

输出结果
在这里插入图片描述

这可以看到只输出了两张图片,那么我们引入的是三张图片,来到打包文件built.js查看原因
在这里插入图片描述

通过145行查看,发现对应的是0和1这两张图
在这里插入图片描述

在这里插入图片描述

同样也会发现,那张2.jpg小于8kb,比转成base64了
在这里插入图片描述

运行检查效果
发现对应的div里面小于8kb的背景图呈现方式是base64
在这里插入图片描述

以上为样式中引入图片资源
但是日常开发中,可能在html中在img中引入图片
在index.html中引入img标签引入图片

<body>
  <div id="box1"></div>
  <div id="box2"></div>
  <div id="box3"></div>
  <img src="./1.jpg" alt="1.jpg">
</body>

运行效果,发现没有抛错
但是打包生成的index.js文件,发现生成的引入依旧是

  <img src="./1.jpg" alt="1.jpg">

但是查看目录,并未发现1.jpg这个文件,当前目录下存在的图片是

运行发现图片碎掉

因此上面的处理方式存在的问题就是:默认处理不了html中的img图片

因此需要再加一个loader

{
        test: /\.html$/,
        //处理html文件的img图片(负责引入img,从而能够被url-loader进行处理)
        loader:'html-loader'

      }

下载

F:\study\webpack>npm i html-loader -D

运行后未抛错,查看打包的index,html文件
在这里插入图片描述

为什么这里会是obj呢?

因为这里默认情况下,我们的url-loader会使用es6的module去处理这个模块
这个html-loader他打包之后引入的img是commonjs的引入,以es6的语法去解析
commonjs的模块,是解析不了的,因此需要在utl-loader中加一个处理

解决办法:


 关闭url-loader的es6模块化,使用commonjs解析

{
        //处理图片资源
        test: /\.(jpg|png|gif)$/,
        //使用一个loader的时候可以直接写,不用use
        //需要下载两个包 ,url-loader,file-loader
        loader: 'url-loader',

        options: {
          //图片大小小于8kb,就会被base64处理,一般是项目中的小图片,这里不一定是8,可以根据实际情况处理
          //优点:减小请求数量(减轻服务器压力)
          //缺点:图片体积会变大(文件请求速度变慢)
          limit: 8 * 1024,
          esModule: false   //关闭url-loader的es6模块化
        }
      },

再次运行,查看打包的index.html发现
在这里插入图片描述

这个src已经变成完整的图片路径
这么一长串数字是生成的唯一哈希值,运行能正确显示

我们也可以对文件进行重命名,通过name

{
        //处理图片资源
        test: /\.(jpg|png|gif)$/,
        //使用一个loader的时候可以直接写,不用use
        //需要下载两个包 ,url-loader,file-loader
        loader: 'url-loader',

        options: {
          //图片大小小于8kb,就会被base64处理,一般是项目中的小图片,这里不一定是8,可以根据实际情况处理
          //优点:减小请求数量(减轻服务器压力)
          //缺点:图片体积会变大(文件请求速度变慢)
          limit: 8 * 1024,
          esModule: false,
          //给图片重命名,[hash:10]取图片的hash的前10位
          //[ext]去文件原来的拓展名
          name:'[hash:10].[ext]'
        }
      },

运行之后可以查看到名字变小了
在这里插入图片描述

当webpack打包后如果发现同一个文件被多次引用,只会打包一次

在webpack5中
处理html中的img图片问题,在webpack5中html-loader中也需要配置,esModule为false,否则还是不生效

{
        test: /\.html$/,
        /**
         * html-loader可以处理html中的img图片,可负责将其中的图片引入,然后交由url-loader进行解析
         */
        loader: html-loader,
        options: {
          esModule: false
        }
      }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值