处理图片和字体文件使用file-loader或url-loader。因为url-loader封装了file-loader，所以一般使用url-loader。

安装

npm i file-loader url-loader -D

配置

更改 webpack.config.js 文件，如下：

  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'] // loader 从右向左 执行
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.s(c|a)ss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
      // 配置图片和字体
      {
        test: /\.(jpg|jpeg|png|gif|bmp)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 5*1024, // 5kb以下的用base64编码，5kb以上的用原图片
            outputPath: 'images', // 输出到images文件夹中
            name: '[name]-[hash:4].[ext]' // 重命名
          }
        }
      },
      {
        test: /\.(woff|woff2|eot|svg|ttf)$/,
        use: 'url-loader'
      }
    ]
  },