webpack配置：关于字体图标呈方块的问题

Question

webpack配置: 关于图片设置，只要在配置里面只要加了 limit:4064,字体图标就会呈方块，去掉就不会，但是我只有加了才会把图片一起打包，有没有方法解决这个问题啊

  module:{
        rules:[
        {
            {
                test: /\.jpg|png|svg|woff|woff2|gif|ttf|eot$/i,
                use: [
                    {
                        loader: 'url-loader',//url-loader依赖了file-loader
                        options: {
                            esModule: false,
                            limit:4064,
                            name:'assets/[name]-[hash:5].[ext]/',
                        }
                    }
                ]
            },
            {test: /\.vue$/,use:'vue-loader'}
        ]
    },

Answer 1

字体资源不要通过 url-loader 引入，若尺寸过小会被转为 DataURL。你可以通过 file-loader 来引入。

关于 file-loader 和 URL-loader 的差异可以看看这个: 从零构建 webpack 脚手架(基础篇)

// 资源路径
const genAssetSubPath = (dir: string) => `${dir}/[name].[hash:8]`;

/**
 * 生成 url loader 选项
 */
const genUrlLoaderOptions = (dir: string) => ({
  limit: 4096,
  // 指定当目标文件的大小超过 limit 选项中设置的限制时, 使用的备用 loader 解析
  fallback: {
    loader: 'file-loader',
    options: {
      name: genAssetSubPath(dir),
    },
  },
});


  //  ========== rules ==========
  // 图片资源
  {
    test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
    use: {
      loader: 'url-loader',
      options: genUrlLoaderOptions('img'),
    },
  },

  // svg 不转为 base64
  // 除此之外还可以通过 raw-loader 获取 svg 的文本，但该选项会不会跟 file-loader 有冲突还需确认
  {
    test: /\.(svg)(\?.*)?$/,
    use: {
      loader: 'file-loader',
      options: {
        name: genAssetSubPath('img'),
      },
    },
  },

  // 媒体资源
  {
    test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
    use: {
      loader: 'url-loader',
      options: genUrlLoaderOptions('media'),
    },
  },