How to configure font file output directory from font-awesome-webpack in webpack?

Question

I just installed font-awesome-webpack. I import it using: require("font-awesome-webpack");

My webpack config includes the following in my module loaders array:

    { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
    { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }

Problem is I am getting this error in developer console:

localhost/:1 GET http://localhost/mysite/app/db812d8a70a4e88e888744c1c9a27e89.woff2 
localhost/:1 GET http://localhost/mysite/app/a35720c2fed2c7f043bc7e4ffb45e073.woff 
localhost/:1 GET http://localhost/mysite/app/a3de2170e4e9df77161ea5d3f31b2668.ttf 404 (Not Found)

The problem is, those files are created at the root (within the mysite directory). How do I configure such that those woffs and ttf are output within the mysite/app directory?

Anyone? Is this not the way to use webpack? – Rolando Dec 02 '15 at 00:50 — Rolando, Dec 02 '15 at 00:50
Am I using font-awesome/webpack in the wrong way? – Rolando Dec 03 '15 at 05:30 — Rolando, Dec 03 '15 at 05:30

Vincent Taing · Accepted Answer · 2017-04-27T18:16:43.367

39

I've recently wanted to use font awesome with webpack v1, I've installed the npm module font-awesome not font-awesome-webpack

You must install few loaders before :

npm i css-loader file-loader style-loader url-loader

and add use them in your webpack.config.js :

module: {
    loaders: [{
      test: /\.css$/,
      loader: 'style!css?sourceMap'
    }, {
      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"
    }]
  }

Now if you include in your entry.js :

require('font-awesome/css/font-awesome.css');

You normally be able to use font-awesome in your template :

<i class="fa fa-times"></i>

This gist helped me : https://gist.github.com/Turbo87/e8e941e68308d3b40ef6

edited Apr 27 '17 at 18:16

answered Dec 03 '15 at 09:25

Vincent Taing

3,283
2
18
24

2

So does fontawesome-webpack just have problems with it or something? – Rolando Dec 12 '15 at 04:11
1

This is the one – zilj Sep 08 '16 at 09:59
5

Note that you'll also need to **set `publicPath` in `output` in your `webpack.config.js` file**, or the font URLs will be relative to your application path and they'll 404. – Wilfred Hughes Sep 28 '16 at 17:12
@Plastic To the `output` `path` – Rune Antonsen Feb 07 '17 at 10:15
1

BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders. You need to specify 'css-loader' instead of 'css', see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed. This is for new webpack. – jmq Apr 27 '17 at 16:01

score 10 · Answer 2 · edited Oct 11 '16 at 19:56

10

As of Feb. 2016 this seems to be a common question with webpack, so I hope this provides some help. If you add this to the loader: '&name=./path/[hash].[ext]', that specifies where to look for those files. For example:

{
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'url-loader?limit=10000&mimetype=application/font-woff&name=./[hash].[ext]'
}

This places the correct URL to the fonts within the generated CSS file.

I recommend this method when dealing with anything other than css/scss. Hope this helps.

edited Oct 11 '16 at 19:56

james

5,006
8
39
64

answered Feb 06 '16 at 08:01

Paul

1,056
11
18

This helped me! Thank you! – Oak Jun 16 '16 at 15:47
This was the only solution that worked for me with webpack 2.x – Plastic Feb 01 '17 at 09:24

score 4 · Answer 3 · answered Apr 30 '16 at 13:25

In addition to the above answers, I I had to specify a path in output to get it working like so to specify the hosted location and not write the assets to the root path:

output: {
     filename: "./bundle.js",
     path: “./client”
},
module: {
       loaders[
          {
              test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
              loader: "url?limit=10000&mimetype=application/font-woff&name=./webpack-assets/[name]/[hash].[ext]"
            }, {
              test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
              loader: "url?limit=10000&mimetype=application/font-woff&name=./webpack-assets/[name]/[hash].[ext]"
            }, {
              test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
              loader: "url?limit=10000&mimetype=application/octet-stream&name=./webpack-assets/[name]/[hash].[ext]"
            }, {
              test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
              loader: "file?&name=./webpack-assets/[name]/[hash].[ext]"
            }, {
              test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
              loader: "url?limit=10000&mimetype=image/svg+xml&name=./webpack-assets/[name]/[hash].[ext]"
            }   
  ]  // loaders
} // module

score 2 · Answer 4 · answered Aug 22 '16 at 13:49

2

{
    test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=\d+\.\d+\.\d+)?$/,
    loader: 'url-loader?limit=100000'
}

This schema helped me

answered Aug 22 '16 at 13:49

tonghae

95
1
9

Why use URL-loader for PNGs? – Design by Adrian Jan 29 '17 at 14:06

score 1 · Answer 5 · answered Jun 28 '16 at 07:42

This is my case, because of my script path is like below:

    script(src='/javascripts/app.js')

So, I have to add '&name./javascripts/[hash].[ext]' to all font files like:

{
  test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
  loader: "url?limit=10000&mimetype=application/font-woff&name=./javascripts/[hash].[ext]"
}, {
  test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
  loader: "url?limit=10000&mimetype=application/font-woff&name=./javascripts/[hash].[ext]"
}, {
  test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
  loader: "url?limit=10000&mimetype=application/octet-stream&name=./javascripts/[hash].[ext]"
}, {
  test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
  loader: "file?name=./javascripts/[hash].[ext]"
}, {
  test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
  loader: "url?limit=10000&mimetype=image/svg+xml&name=./javascripts/[hash].[ext]"
}

score 1 · Answer 6 · answered Dec 29 '16 at 14:48

Just as a note, I came across a similar fault using the font-awesome-loader. Where the directory would not be set correct, regardless of any of the changes above.

To correct this, the option publicPath can be added to output:

output: { path: config.outputPath, filename: '[name].js', publicPath: '/assets/' },

The folder /assets/ will be changed to wherever you actually store your fonts.

Hopefully this helps.

score 0 · Answer 7 · answered Sep 25 '16 at 15:48

I had font-awesome-webpack working on my PC, but it wouldn't work on my Mac. I think my PC was still throwing the 404s for the .woff2, .woff, and .tiff, but the icons displayed properly, so I ignored the problem.

My Mac, however, would not display the icons. While reading this Q&A, I tried a bunch of things. Here's what lead to my solution:

On my http://localhost:8080/View/ page, I was getting 404s that looked like the link below:
I entered http://localhost:8080/View/e6cf7c6ec7c2d6f670ae9d762604cb0b.woff2 into the browser, and confirmed the 404.
I tried going to http://localhost:8080/e6cf7c6ec7c2d6f670ae9d762604cb0b.woff2 (removing the extra path before the font file), and was able to access the file.
I modified Paul's answer to remove the . that made the file request relative.

For example, Paul suggested:

{
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'url-loader?limit=10000&minetype=application/font-woff&name=./[hash].[ext]'
}

Take note of the &name parameter, that uses ./[hash].[ext]. I dropped the leading . and now there are no 404s (the browser correctly requests the files from the root of the site):

{
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'url-loader?limit=10000&minetype=application/font-woff&name=/[hash].[ext]'
}

Conclusion: If your entry point is NOT at your web root, and you're able to access the font files at the web root, you probably just need to use this name configuration to fix the path.

score 0 · Answer 8 · edited Nov 30 '16 at 23:11

0

Same issue faced.

Fixed it using the below syntax,

loader: "file?name=./fonts/[hash].[ext]"

fonts is the directory name, replace it with your own directory name.

Example:

{ 
  test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
  loader: "url?name=/build/[hash].[ext]&limit=8192&mimetype=application/font-woff"
}

edited Nov 30 '16 at 23:11

Floern

33,559
24
104
119

answered Nov 30 '16 at 23:09

Johnson Samuel

2,046
2
18
29

How to configure font file output directory from font-awesome-webpack in webpack?

8 Answers8

Linked