Search code examples
npmfontswebpackfont-awesomewebpack-2

How to use font files emitted by webpack?

Summary:

webpack issues, in addition to bundle.js, font files for font-awesome. These files are not properly referenced in bundle.js.

Details:

I have an entry.js file which outputs to a subdirectory (webpack) of a subdirectory (dist). dist is the standalone, CDN distribuable directory. The structure is such for reasons specific to the site generator (which does not matter for this question).

(root folder for the site dev)
│   entry.js
│   webpack.config.js
│
└───dist
    │   index.html
    │
    └───webpack
            674f50d287a8c48dc19ba404d20fe713.eot
            912ec66d7572ff821749319396470bde.svg
            af7ae505a9eed503f8b8e6982036873e.woff2
            b06871f281fee6b241d60582ae9369b9.ttf
            bundle.js
            fee66e712a8a08eef5805a46892932ad.woff

index.html loads webpack/bundle.js and attempts to use Font Awesome:

<!DOCTYPE html>
<html lang="en">
    <head>
    </head>
    <body>
        hello world <i class="fa fa-shower"></i>
        <script src="webpack/bundle.js"></script>
    </body>
</html>

The font files are not correctly referenced, bundle.js looks for them in the root of the site while they are in webpack, where they were output together with bundle.js. in other words bundle.js is not aware that webpack.config.js instructed it to go to a subdirectory. The output on the console (console output):

index.html:1 GET file:///D:/MegaSync/dev/webpack/testoffonts/dist/af7ae505a9eed503f8b8e6982036873e.woff2 net::ERR_FILE_NOT_FOUND
index.html:1 GET file:///D:/MegaSync/dev/webpack/testoffonts/dist/fee66e712a8a08eef5805a46892932ad.woff net::ERR_FILE_NOT_FOUND
index.html:1 GET file:///D:/MegaSync/dev/webpack/testoffonts/dist/b06871f281fee6b241d60582ae9369b9.ttf net::ERR_FILE_NOT_FOUND

How to raise this awareness for bundle.js so that it references its output-generated peers at the same level it is itself (/webpack/... in my case)?

The component files:

entry.js:

import 'font-awesome/css/font-awesome.css'

webpack.config.js:

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname + '/dist/webpack', // should use the path module
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "url-loader?limit=10000&mimetype=application/font-woff"
            },
            {
                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "file-loader"
            }
        ]
    }
};

Note: this problem does not appear for fonts imported in a CSS file, as of now the only case I have it is with Font Awesome used as a module

Solution

  • All credit for the solution goes to Jiggneshh Gohel and his detailed post on webpack GithHub

    Adding publicPath solves the problem:

    output: {
        path: __dirname + '/dist/webpack', // should use the path module
        filename: "bundle.js",
        publicPath: "/webpack/",
    },

    The path should be the one the bundle and other emitted files are output to, relative to the root of the exposed site (http://example.com/).