字体美妙图标在Webpack中无法正常工作

Question

我正在尝试为我的网站添加font-awesome图标。

这是我的webpack配置：

module.exports = {
  watch: true,
  context: __dirname + '/src',
  entry: './entry.js',
  devTool: "source-map",
  output: {
    path: __dirname + "/dist",
    publicPath: '/dist/',
    contentBase: __dirname + '/dist/',
    filename: '[name].js'
  },
  module: {
    loaders: [

      {
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
      },
      {test: /\.(otf|gif|png|jpg|JPG)$/, loader: "url-loader"},
      {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=application/font-woff"
      }, {
        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=application/font-woff"
      }, {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=application/octet-stream"
      }, {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: "file"
      }, {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=image/svg+xml"
      }
    ]
  }
};

在开发服务器中，它运行得很好，但是当我尝试打开dist/index.html时，它找不到字体。我是这样包含它的：

@import "~font-awesome/css/font-awesome.min.css";

这里是代码库

我认为，在我的webpack.config文件中出现了错误。但其他字体按预期工作。

- Litvinenko Evgeny

---

什么意思是“找不到字体”？ - Bob Sponge

@BobSponge 在这里（https://github.com/LitvinenkoEvgeny/elegant/blob/master/src/main.scss#L5）我添加了font-awesome，而在这里（http://litvinenkoevgeny.github.io/elegant/）右上角，必须是菜单图标。 - Litvinenko Evgeny

将 publicPath 更改为 /elegant/dist/ 或 ./dist/。 - Bob Sponge

@BobSponge 哦，谢谢你，你救了我！ - Litvinenko Evgeny

Answer 1

如果您将publicPath设置为绝对路径，那么所有静态资源都将从http://litvinenkoevgeny.github.io/dist/请求，而实际路径是字体相关文件可从Web获取的http://litvinenkoevgeny.github.io/elegant/dist/。

因此，您只需要将publicPath更改为相对路径：./dist/。

- Bob Sponge