Webpack 4, как получить правильный путь шрифта - PullRequest
Новая
       60

Webpack 4, как получить правильный путь шрифта

0 голосов
/ 13 апреля 2020

Я использую webpack 4 для создания и разделения файлов ресурсов моего приложения, в основном это то, что я хочу: enter image description here

Но я использую font-awesome и некоторые font- классные файлы используют файлы шрифтов, поэтому у меня есть 404 ошибки для файлов шрифтов: enter image description here

Так как мне заставить это работать? Вот выдержка из моей конфигурации веб-пакета: 

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]',
        }
      }
    ]
  }
}

1 Ответ

0 голосов
/ 13 апреля 2020

Наконец, вот как я решил свою проблему: 

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