Webpack——03——打包图片资源_开发网站常用图片打包-CSDN博客

本文链接：https://blog.csdn.net/x1037490413/article/details/110148908

1.创建index.html,index.less,并引入图片
2.创建入口文件index.js，引入index.less,不用引入html文件，因为插件会帮忙引入
3.打包图片资源需要下载包 url-loader和file-loader，html-loader
4.build文件夹里就是打包好输出的东西，有时候只输出了部分图片，是因为有的图片呗base64处理成了字符串，而什么大小的图片被处理成字符串是自己设置的
5.html-loader是处理以这种形式引入图片的<img src="5c9bd85344.jpg" alt="">
其他步骤就不多加赘述了，打包less,html资源之前博客有写
代码：
index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <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="./002Qjjnugy1gl1q5z3x91j60u0109k8302.jpg" alt="">
</body>
</html>

index.js

import './index.less'

index.less

#box1{
  width: 100px;
  height: 100px;
  background-image: url('./002Qjjnugy1gl1q5z3x91j60u0109k8302.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
#box2{
  width: 100px;
  height: 100px;
  background-image: url('./c83f20c8gy1gl1pp9b9d9j20u011ihdu.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
#box3{
  width: 100px;
  height: 100px;
  background-image: url('./u=2972743467,129165969&fm=26&gp=0.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

webpack.config.js

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: [
      //需要使用多个Loader用use
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        //处理图片资源
        //需要下载两个包 因为url-loader 依赖于file-loader
        //问题：默认处理不了Html中img图片
        test: /\.(jpg|png|gif)$/,
        loader: "url-loader",
        options: {
          /*图片大小小于8kb,就会被base64处理
         优点：减少请求数量（减轻服务器压力）
         缺点：图片体积会更大（文件请求速度更慢）
         */
        limit:8*1024,
        //因为url-loader默认使用es6模板化解析，而loader引入图片是common.js
        //解析时会出现问题：[object Module]
        //解决：关闭url-loader的es6模块化，使用common.js解析
        esModule:false,
        //给图片进行重命名
        //[hash:10]取图片的hash的前10位
        //[ext]取文件原来扩展名
        name:'[hash:10].[ext]'
        },
      },
      {
        test:/\.html$/,
        //处理html文件的img图片（负责引入img,从而能被url-loader处理）
        loader:"html-loader"
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
  mode: "development",
};