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

最新推荐文章于 2024-07-21 15:11:42 发布

ZhaoYulin6

最新推荐文章于 2024-07-21 15:11:42 发布

阅读量248

点赞数

文章标签： webpack

本文链接：https://blog.csdn.net/ZhaoYulin6/article/details/118185500

版权

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

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

分别大小为：
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
        }
      }