在Webpack中用url-loader处理图片和字体的问题

在Webpack中使用url-loader处理图片和字体文件，可以方便地将这些文件打包到生成的最终bundle文件中，从而加快页面的加载速度。下面是一份完整的攻略，包括安装必要的loader、配置Webpack以及两个例子。

安装必要的loader

首先，为了使用url-loader，我们需要安装它。可以使用npm或者yarn。

使用npm：

npm install url-loader file-loader --save-dev

使用yarn：

yarn add url-loader file-loader --dev

其中，file-loader是url-loader的依赖，我们也需要进行安装。

配置Webpack

接下来，需要在Webpack的配置文件中进行配置，以便正确地处理图片和字体文件。主要涉及到两个配置项：module.rules和output.publicPath。

配置module.rules

我们需要在Webpack的配置文件中添加module.rules规则来指定要调用url-loader的文件类型和处理方法。主要需要注意的是，file-loader也需要添加进来，以便可以一起使用。

以下是一份示例配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'images/[name].[hash:7].[ext]'
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'fonts/[name].[hash:7].[ext]'
        }
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'file-loader',
        options: {
          name: 'images/[name].[hash:7].[ext]'
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'file-loader',
        options: {
          name: 'fonts/[name].[hash:7].[ext]'
        }
      }
    ]
  },
  output: {
    publicPath: '/'
  }
};

在上面的示例中，我们指定了处理.png、.jpg、.jpeg、.gif和.svg格式的图片文件，以及.woff、.woff2、.eot、.ttf、.otf格式的字体文件。其中，文件大小小于10KB的会转成base64编码，保存在JS文件中，文件大小大于10KB的则会放到指定的文件夹下。

配置output.publicPath

配置output.publicPath可以让Webpack在解析依赖关系时自动将图片文件和字体文件的引用路径改为相对路径。可以将publicPath设置为服务器根路径'/'，这样在浏览器中加载时不会出现404错误。以下是一个示例：

module.exports = {
  // ...其他配置...
  output: {
    publicPath: '/'
  }
};

示例1：处理图片

在我们的HTML代码中添加一张图片，如下所示：

<img src="img/example.png" alt="示例图片">

我们的项目文件和目录结构如下所示：

- src
  - img
    - example.png
  - index.js
- index.html
- webpack.config.js

在开发环境下，执行Webpack打包后，Webpack将所有文件打包到dist目录中。图片文件也会被打包到dist目录下的img/文件夹中，但不会被正确的解析URL。

我们需要使用url-loader和file-loader来处理图片文件，以便能够正确地解析URL。我们打开Webpack的配置文件，添加以下规则：

{
  test: /\.(png|jpg|gif|svg)$/,
  loader: 'url-loader',
  options: {
    limit: 8192,        // 单位是Byte，太小的图片会被编码成base64编码的Data URL，减少http请求（最小值不应少于4KB哟），而太大的图片将使用file-loader处理
    name: '[path][name].[ext]'  // 存储到img文件夹下，保留目录结构
  }
}

这里我们对.png、.jpg、.gif和.svg格式的图片文件进行处理，设定limit的大小为8192，表示图片文件大小超过8KB的图片文件将被使用file-loader处理，小于等于8KB的则会使用data:URL编码成base64字符串。name选项是将图片文件存储到img/文件夹下，并保留源文件中的路径。

现在我们再次打包，Webpack将会处理并编译所有的图片文件（限制大小的文件以及大于限制大小的文件均被处理），并在编译后的HTML代码中添加正确的路径引用，如下所示：

<img src="/img/example.f1a5b30.png" alt="示例图片">

现在图片文件已经正确地解析URL，可以正确地显示在HTML页面中。

示例2：处理字体

处理字体文件的过程和处理图片类似。我们需要首先将字体文件以file-loader的方式进行处理，然后使用url-loader将其转为data:URL格式以便在CSS中引用。

我们在CSS文件中添加以下代码：

@font-face {
  font-family: 'MyFont';
  src: url('../fonts/MyFont.woff2') format('woff2'),
       url('../fonts/MyFont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

我们的目录结构如下所示：

- src
  - css
    - style.css
  - fonts
    - MyFont.woff2
    - MyFont.woff
  - index.js
- index.html
- webpack.config.js

我们在Webpack的配置文件中添加如下规则：

{
  test: /\.(woff|woff2|eot|ttf|otf)$/,
  exclude: /node_modules/,
  loader: 'url-loader',
  options: {
    name: '[path][name].[ext]',   // 存储到fonts文件夹下
    limit: 8192    // 大小超过这个限制将被识别成文件而不是base64数据
  }
}

这里我们对.woff、.woff2、.eot、.ttf和.otf格式的字体文件进行处理。我们将limit的值设置为8192，表示字体文件大小超过8KB的将被处理成文件而不是base64数据。name选项用于指定输出的路径和文件名。

现在我们再次打包，字体文件将被正确地处理成文件，同时在CSS文件中按正确的方式引用，以便在Webpack编译后的页面中正确地显示字体。