CODEWITHSUNDEEP
webpackfont-awesome
Moussa
Moussa

Reputation: 4154

Webpack 4 how to get correct font path

I am using webpack 4 to generate and separate my app resource files, basically this is what I want : enter image description here

But I am using font-awesome and some font-awesome class use font files so I have 404 errors for font files : enter image description here

So how do I get this working? Here is an extract of my webpack config :

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

Upvotes: 0

Views: 168

Answers (1)

Moussa
Moussa

Reputation: 4154

Finally here is how I solved my problem :

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

Upvotes: 1

Related Questions