webpack css-loader+file-loader在Windows与Mac下构建结果不一致问题

这是典型的跨平台路径解析兼容性问题——Mac使用正斜杠/作为路径分隔符，Windows则用反斜杠\，再加上Webpack处理样式提取和资源引用时的路径计算逻辑差异，就导致了Windows下构建后字体路径失效的问题。下面是针对性的解决方案：

核心问题分析 #

你的Less文件里用../fonts/abc.ttf引用字体，Mac上Webpack能正确解析相对路径，但Windows下因为分隔符和路径计算的细微差异，ExtractTextPlugin提取CSS后，生成的url()路径可能出现错误（比如变成反斜杠，或者相对层级不对），导致浏览器找不到字体文件。

分步解决方案 #

1. 配置File-loader统一处理字体资源 #

先让Webpack接管字体文件的打包，确保输出路径和引用路径在跨平台下一致。在Webpack配置中添加字体文件的处理规则：

module.exports = {
  // 其他配置...
  module: {
    rules: [
      // 你的样式规则...
      {
        test: /\.(ttf|woff|woff2|eot)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              // 字体输出到构建目录下的fonts/文件夹
              outputPath: 'fonts/',
              // CSS中引用字体时的相对路径（因为CSS会输出到styles/目录，所以需要向上跳一级找fonts）
              publicPath: '../fonts/',
              // 保持文件名不变，也可以按需添加哈希
              name: '[name].[ext]'
            }
          }
        ]
      }
    ]
  }
};

2. 调整Less中的字体引用路径 #

修改styles/styles.less里的@font-face，让Webpack来解析路径，而不是依赖手动写的相对路径：

@font-face {
  font-family: 'abc';
  // 直接引用相对于Less文件的路径，Webpack会通过file-loader处理成正确的输出路径
  src: url('../fonts/abc.ttf');
}

这里的相对路径是相对于当前Less文件的位置，Webpack会自动根据file-loader的配置转换为最终的CSS引用路径，跨平台下都会生成正斜杠的路径。

3. 修正ExtractTextPlugin的PublicPath配置 #

ExtractTextPlugin在提取CSS时，会单独计算资源的引用路径，所以需要给它设置正确的publicPath，确保CSS里的资源引用路径是相对于CSS文件本身的：

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  // 其他配置...
  module: {
    rules: [
      {
        test: /\.(css|less)$/,
        use: ExtractTextPlugin.extract({
          // 关键：设置publicPath为../，因为CSS输出到styles/目录，要引用上级目录的fonts
          publicPath: '../',
          use: [
            {
              loader: 'typings-for-css-modules-loader',
              options: {
                // 你的现有配置，比如modules: true, camelCase: true等
                modules: true,
                namedExport: true,
                camelCase: true,
                localIdentName: '[name]__[local]--[hash:base64:5]'
              }
            },
            'less-loader'
          ]
        })
      }
    ]
  },
  plugins: [
    // 指定CSS输出到styles/目录下
    new ExtractTextPlugin('styles/styles.css')
  ]
};

4. 验证构建目录结构 #

确保构建后的目录结构在Mac和Windows下完全一致：

构建目录/
├── fonts/
│   └── abc.ttf
├── styles/
│   └── styles.css
└── examples/
    └── example.js（编译后的文件）

为什么这样能解决问题？ #

• File-loader强制统一了资源的输出路径和引用路径，不管系统分隔符是什么，最终生成的CSS里的url()都会用正斜杠。
• ExtractTextPlugin的publicPath确保了CSS文件里的资源引用是相对于CSS文件本身的相对路径，不会因为系统差异导致层级计算错误。
• 让Webpack接管所有资源路径的解析，避免了手动写相对路径带来的跨平台兼容性问题。

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