Webpack——webpack打包图片一般的前端项目中的图片以两种方式使用：在样式文件中作为一个元素的背景url图片

一般的前端项目中的图片以两种方式使用：

在样式文件中作为一个元素的背景url图片
在html文件中以的形式使用

但是这两种使用方式在进行webpack打包时使用到的loader却是不同的。

一、打包样式文件中url图片资源

webpack要想打包项目中的图片资源需要配置url-loader、file-loader，其中url-loader是依赖于file-loader的所以也需要安装，但是在webpack.config.js中只需要配置url-loader即可。

安装loaders

npm i url-loader@3.0.0 file-loader@5.0.2 -D

webpack使用url-loader和file-loader打包样式文件中url图片资源，对于不转化为base64处理的图片会在打包后的dist目录下根据图片内容生成一个以31位的唯一hash值为文件名的图片，对于要转化为base64处理的图片会把图片压缩到打包后的build.js中。

所使用的图片资源大小

文件结构 其中 jianguo.png小于 11kb 被转化为base64

// webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  // 打包入口文件
  entry: './src/index.js',
  output: {
    // __dirname nodejs中的变量，表示 当前文件所在的目录
    path: path.resolve(__dirname, 'dist'),
    filename: 'build.js'
  },
  // loader 的配置
  module: {
    // 不同文件需要配置不同 loader
    rules: [
      // 处理 .less 文件
      {
        test: /\.less$/, // loader 会遍历处理 .less 文件
        use: [
          'style-loader',
          'css-loader',
          // 将.less文件编译为.css文件
          'less-loader'
        ]
      },
      // 处理样式文件中url图片资源
      {
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          // 图片大小在8~12KB，可以转化为base64处理
          // 优点：减少http的请求数量（主要是为了减少三次握手）
          // 缺点：图片体积会变大（33%左右，所以大图片不建议转化为base64处理），文件请求速度变慢
          limit: 11 * 1024 // 因为我使用的图片最小是 9kb，所以当文件小于11kb时转化为base64
        }
      }
    ]
  },
  // plugin 的配置
  plugins: [
    new HtmlWebpackPlugin({
      // 以指定位置的html文件为模板进行打包，并自动引入打包后的build.js文件
      template: './src/index.html'
    })
  ],
  // 模式
  mode: 'development'
  // mode:"production",
}

// index.less
.box1 {
  width: 80px;
  height: 80px;
  background-image: url('./jianguo.png');
  background-repeat: no-repeat;
}
.box2 {
  width: 100px;
  height: 100px;
  background-image: url('./dahai.png');
  background-repeat: no-repeat;
}
.box3 {
  width: 400px;
  height: 500px;
  background-image: url('./yinyue.png');
  background-repeat: no-repeat;
}

浏览器中打开

二、打包html文件中的img标签图片

安装loaders

npm i url-loader@3.0.0 file-loader@5.0.2 html-loader@0.5.5 -D

打包

使用专门用于处理html文件中的图片的html-loader引入img图片，从而能够被url-loader处理
配置url-loader并关闭es6模块化，因为html-loader使用CommonJs解析img标签，但是url-loader默认使用es6模块化解析。

// webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  // 打包入口文件
  entry: './src/index.js',
  output: {
    // __dirname nodejs中的变量，表示 当前文件所在的目录
    path: path.resolve(__dirname, 'dist'),
    filename: 'build.js'
  },
  // loader 的配置
  module: {
    // 不同文件需要配置不同 loader
    rules: [
      // 处理 .less 文件
      {
        test: /\.less$/, // loader 会遍历处理 .less 文件
        use: [
          'style-loader',
          'css-loader',
          // 将.less文件编译为.css文件
          'less-loader'
        ]
      },
      // 处理样式文件中url图片资源
      {
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          // 图片大小在8~12KB，可以转化为base64处理
          // 优点：减少http的请求数量（主要是为了减少三次握手）
          // 缺点：图片体积会变大（33%左右，所以大图片不建议转化为base64处理），文件请求速度变慢
          limit: 11 * 1024, // 因为我使用的图片最小是 9kb，所以当文件小于11kb时转化为base64
          // 新增
          esModule: false, // 如果不关闭es6模块化解析，打包后的<img>的src属性等于[object Module],造成图片不能显示
        }
      },
      // 新增
      {
        test: /\.html$/,
        loader: 'html-loader'
      }
    ]
  },
  // plugin 的配置
  plugins: [
    new HtmlWebpackPlugin({
      // 以指定位置的html文件为模板进行打包，并自动引入打包后的build.js文件
      template: './src/index.html'
    })
  ],
  // 模式
  mode: 'development'
  // mode:"production",
}

浏览器打开