使用Webpack与postcss-loader引入Font Awesome遇资源加载问题

我之前也碰到过一模一样的坑！给Webpack加上postcss-loader之后，原本正常加载的Font Awesome字体突然找不到了，折腾半天才发现是loader顺序和配置细节出了问题。下面是我亲测有效的解决步骤：

1. 调整Loader执行顺序（最关键！） #

Webpack的loader是**从右往左（从下往上）**执行的，处理CSS的loader顺序绝对不能乱。正确的顺序应该是：style-loader → css-loader → postcss-loader，对应的配置示例如下：

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        'style-loader', // 最后执行：把处理好的CSS注入到DOM中
        {
          loader: 'css-loader', // 中间执行：解析CSS中的@import和url()引用
          options: {
            // 重点配置！告诉css-loader：解析@import的CSS文件时，先经过1个前置loader（也就是postcss-loader）
            importLoaders: 1,
          }
        },
        'postcss-loader' // 最先执行：处理PostCSS的各种转换（比如autoprefixer）
      ]
    }
  ]
}

如果顺序搞反，postcss-loader会先处理CSS，此时css-loader还没解析url('../fonts/...')这类资源引用，自然会抛出找不到文件的错误。

2. 配置资源处理Loader #

postcss-loader只负责处理CSS代码，不会管字体、图片这类非CSS资源，所以必须配置file-loader（或url-loader）来打包这些文件：

// 在module.rules里添加以下规则
{
  test: /\.(eot|svg|ttf|woff|woff2)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[ext]', // 保留原文件名和后缀
        outputPath: 'fonts/', // 打包后输出到dist/fonts目录下
        publicPath: '../fonts/' // 如果CSS打包在dist/css目录，这里要回退一级路径
      }
    }
  ]
},
// 图片资源同理配置
{
  test: /\.(png|jpg|gif)$/,
  use: ['file-loader']
}

这里的publicPath一定要对应项目的输出结构：如果CSS最终输出在dist/css子目录，那字体的引用路径需要回退一级到dist/fonts，设置publicPath: '../fonts/'才能让CSS正确找到字体文件。

3. 检查PostCSS插件是否干扰路径 #

如果你用了postcss-import或postcss-url这类插件，要确保它们的配置不会修改资源引用路径：

• postcss-import默认处理@import的路径，但不要开启重写资源引用的配置；
• 如果用了postcss-url，要配置它使用file-loader来处理资源，而非自行修改路径。

4. 验证资源文件的实际路径 #

最后再确认一遍：你的style.css里写的../fonts/fontawesome-webfont.eot，对应的实际文件是否真的在项目的../fonts目录下？比如如果style.css在src/css文件夹，那字体文件应该放在src/fonts文件夹，这样相对路径才是正确的。

按照上面的步骤调整后，Webpack应该就能正常解析字体和图片资源了！

内容的提问来源于stack exchange，提问作者lostintranslation