如何在 webpack 中设置文件加载器的特定前缀？答案

【问题标题】：How to set the specific prefix for file-loader in webpack?如何在 webpack 中设置文件加载器的特定前缀？
【发布时间】：2015-11-04 11:46:37
【问题描述】：

我有带有字体的 sass 文件：

$icons-font-path: "~material-design-icons/iconfont/";

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(#{$icons-font-path}/MaterialIcons-Regular.woff2) format('woff2');
}

以及将字体下载到特定目录 (/home/user/project/example/src/static/fonts/) 的文件加载器：

  {
    test: /\.(woff|woff2|eot|ttf)$/,
    loader: 'file',
    query: {
      name: path.join(STATIC_PATH, 'fonts', '/[name]-[hash].[ext]')
    }
  },

这对我来说没问题，但是在 url 中的 css 具有相同的路径，例如：

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(/home/user/project/example/src/static/fonts/MaterialIcons-Regular.woff2) format('woff2');
}

如何将woff2复制到特定目录并为url(prefix/MaterialIcons-Regular.woff2)设置特定前缀？

【问题讨论】：

标签： javascript css webpack

【解决方案1】：

resolve-url-loader 将允许您指定相对于您的.sass 文件的字体url()。 .css 应该有一个 Webpack 可以解析为模块的路径 url。

关键是让 Webpack 找到您在 url() 语句中指定的所有资产。到那时 resolve-url-loader 就完成了。永远不需要 absolute 选项，因为您应该始终设置 Webpack 以查找所有“模块”，包括资产。

默认情况下（我不是 Webpack 专家）所有 css 和资产都被复制到输出中，并且正确的相对路径被重写为 css url() 语句。

我认为您的问题的症结类似于 CDN 部署，您需要一些绝对前缀。如果是这种情况，请查看 public path 属性。我自己没有使用过它，但它似乎是相关的。

【讨论】：

【解决方案2】：

您可能想要使用sass-loader 和resolve-url-loader 的某种组合。

您的 webpack 加载器配置将如下所示：

module.exports = {
  module: {
    loaders: [
      {
        test   : /\.scss$/,
        loaders: ['style', 'css', 'resolve-url', 'sass?sourceMap']
      }
    ]
  },
  resolveUrlLoader: {
      absolute: '/prefix'
  }
};

【讨论】：

absolute: 'prefix' 前缀 'prefix' 到绝对 URL。有没有办法将它添加到相对 url？