webpack打包时如何转化图片和字体（file-loader url-loader）

主要有两种方式，一种是file-loader，还有一种是url-loader

先看下file-loader：

通过 npm i file-loader -D 安装

配置文件如下：

'use strict'

const path = require('path')

module.exports = {
  mode: 'production',
  entry: {
    index: './src/index.js',
    search: './src/search.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: 'file-loader'
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: 'file-loader'
      }
    ]
  }
}

其次是url-loader：

通过 npm i url-loader -D 安装

核心规则主要是将上面图片解析规则修改为如下，options中的limit值的意思是当图片小于10240时，将图片转为base64

      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10240
            }
          }
        ]
      },