Webpack 4 如何获得正确的字体路径

Question

我正在使用 webpack 4 来生成和分离我的应用程序资源文件，基本上这就是我想要的：

但我使用的字体很棒，而一些字体很棒 class 使用字体文件，所以字体文件出现 404 错误：

那么我该如何让它工作呢？这是我的 webpack 配置的摘录：

module.exports = {
  entry: {app: `./index.js`},
  output: {
    filename: './js/[name].[hash].js',
    path: path.resolve(__dirname, '../dist')
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: './css/[name].[hash].css',
    })
  ],
  module: {
    rules: [
      {
        test: /\.css?$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      },
      {
        test: /\.scss?$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: [
                require('autoprefixer')
              ]
            }
          },
          'sass-loader']
      },
      {
        test: /\.(woff|woff2|eot|ttf)$/,
        loader: 'file-loader',
        options: {
          name: 'fonts/[name].[ext]',
        }
      }
    ]
  }
}

Answer 1

我终于解决了我的问题：

{
  test: /\.(woff|woff2|eot|ttf)$/,
  loader: 'file-loader',
  options: {
    name: 'fonts/[name].[ext]',
    publicPath: (url, resourcePath, context) => {
      return url.indexOf('fa-') >= 0 ? `../${url}` : url;
    }
  }
}

Webpack 4 如何获得正确的字体路径

Webpack 4 how to get correct font path

font-awesome

webpack