Question

我正在将Webpack与文件加载器一起使用，以为我的网站加载自定义的tff / woff字体。 Webpack正在将字体正确输出到目标目录，但未在服务器上重写URL。

@font-face {
  font-family: "Allura";
  src: url('/assets/fonts/Allura-Regular.woff') format('woff'), 
   url('/assets/fonts/Allura-Regular.ttf') format('truetype'); 
}  

html *,
body
{
   font-family: "Allura", "Arial";
}

Then in webpack config:

      {
        test: /.(ttf|otf|eot|woff(2)?)(\?[a-z0-9]+)?$/,
        use: [{
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: utils.assetsPath('fonts'), // where the fonts will go on disk. This works fine.
              publicPath: 'static/fonts/'
            }
          }]
      },

字体在磁盘的输出目录中正确输出。但是，css中的url仍然是：

@font-face {
  font-family: "Allura";
  src: url('assets/fonts/Allura-Regular.woff') format('woff'), 
   url('assets/fonts/Allura-Regular.ttf') format('truetype'); 
}

然后浏览器将调用：请求网址：http://localhost:8080/assets/fonts/Allura-Regular.woff

结果网址应为：请求网址：http://localhost:8080/static/fonts/Allura-Regular.woff

我可以将静态目录的名称更改为资产，但是我想知道为什么publicPath重写不起作用。

我可以补充一点，publicPath函数也不起作用：

      publicPath: (url) => {
        let path = `static/fonts${url}`
        console.log(url, path)
        return path;
      }

此功能永远不会由webpack运行。我没有任何控制台输出。

文件加载器未重写字体网址

0 个答案: