webpack打包图片资源

图片资源使用 url-loader 和 file-loader 来处理(因为 url-loader 要依赖于 file-loader)

下载 url-loader file-loader

npm install url-loader file-loader -D

配置 url-loader

// webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        // 匹配图片资源
        test: /\.(jpg|png|gif)$/,
        // 只使用一个loader 的时候我们可以不使用 use
        loader: 'url-loader',

        // 重点
        options: {
          // 图片大小小于 8kb 的，就会被转为 base64 来处理
          // 优点: 减少请求数量(减轻服务器压力)
          // 缺点: 图片体积可能会更大，导致文件请求速度更慢
          limit: 8 * 1024
        }
      }
    ]
  }
}

如果使用上述 url-loader 来处理图片资源的时候就会带来了一个问题：处理不了 html 文件中的 img 标签图片

那么如何解决呢？

下载 html-loader （ 处理 html 文件的 img 图片，负责引入 img，从而能被 url-loader 进行处理）

npm install html-loader -D

配置 html-loader

// webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          // 问题: url-loader 默认使用 es6 模块化解析，而 html-loader 引入图片是 commonjs，从而在解析的时候出现问题[object Module]
          // 解决方法: 关闭 url-loader 的 es6 模块化，使用 commonjs 解析
          esModule: false
        }
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      }
    ]
  }
}

最后我们发现打包出来的图片的文件名很长，这时候我们可以给打包出来的文件名重命名

// webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          esModule: false,
          // [hash:10]  取图片的 hash 的前10位
          // [ext] 取原图片的扩展名
          name: '[hash:10].[ext]'
        }
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      }
    ]
  }
}