> JavaScript Fundamentals > JavaScript for PHP Geeks: Webpack for Module Loading Awesomeness
Login to bookmark this video
Buy Access to Course
15.

Font Awesome & file-loader [hash]

Share this awesome video!

|

Keep on Learning!

Start your All-Access Pass

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

We have only one link tag left: FontAwesome:

105 lines | app/Resources/views/base.html.twig
// ... lines 1 - 2
<head>
// ... lines 4 - 10
{% block stylesheets %}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />
{% endblock %}
// ... lines 14 - 15
</head>
// ... lines 17 - 105

Remove it! And clean up the stylesheets block:

103 lines | app/Resources/views/base.html.twig
// ... lines 1 - 2
<head>
// ... lines 4 - 10
{% block stylesheets %}{% endblock %}
// ... lines 12 - 13
</head>
// ... lines 15 - 103

We don't have FontAwesome installed yet... so find your open terminal tab and run:

yarn add font-awesome --dev

That's the name of the official FontAwesome package.

Next, in layout.js, you guys know what to do - add require('font-awesome/'). To get the correct path, once again, open up node_modules/, find font-awesome/, and yes! We can say css/font-awesome.css:

15 lines | web/assets/js/layout.js
// ... lines 1 - 8
require('font-awesome/css/font-awesome.css');
require('../css/main.css');
// ... lines 11 - 15

And without doing anything else, refresh! It works instantly!!! This little icon in the menu is from FontAwesome, and so are a few other icons.

The font-loader Hashed Filenames

Close node_modules/ and look inside web/build/. Wow! It's getting crowded! We have fonts from Bootstrap, fonts from FontAwesome and one image.

And, though it's not really important, but we can't quickly see which files are which... because they all have crazy names.

By default, the filenames are a unique hash based on the contents of the file. That's great, because it means that if you reference two files that have the same name... but usually live in different directories, when they're copied to build/, they won't collide. It's also built-in cache busting! Woo!

Controlling file-loader Hashes

Head back to the Webpack site and click back on "Loading Images". There's a link to the documentation for the file-loader.

It shows how to use the file-loader using the inline syntax, which is one of the reasons I wanted you to see it. It looks like there's an option called name... which should let us control the name of those output files. And, just like with Webpack's output, it has some special placeholders, like [name], [extension] and [hash].

Let's play with this! In webpack.config.js, remove the simple file-loader and use the expanded syntax from earlier. That means, add loader: 'file-loader' and options:

65 lines | webpack.config.js
// ... lines 1 - 3
module.exports = {
// ... lines 5 - 14
module: {
rules: [
// ... lines 17 - 33
{
test: /\.(png|jpg|jpeg|gif|ico|svg)$/,
use: [
{
loader: 'file-loader',
options: {
// ... line 40
},
}
]
},
// ... lines 45 - 55
]
},
// ... lines 58 - 63
};

Pass this the name option, set to [name] - that's the original name of the file - -[hash] because we do still want the hash in the name. But shorten it by adding :6. This will only use the first six characters of the hash, which is probably unique enough - these long filenames were bumming me out. Finish with .[ext]:

65 lines | webpack.config.js
// ... lines 1 - 3
module.exports = {
// ... lines 5 - 14
module: {
rules: [
// ... lines 17 - 33
{
test: /\.(png|jpg|jpeg|gif|ico|svg)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name]-[hash:6].[ext]'
},
}
]
},
// ... lines 45 - 55
]
},
// ... lines 58 - 63
};

This is totally not needed - I'm just being anal about how my files are named. Copy all of this and repeat it for the fonts:

65 lines | webpack.config.js
// ... lines 1 - 3
module.exports = {
// ... lines 5 - 14
module: {
rules: [
// ... lines 17 - 44
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name]-[hash:6].[ext]'
},
}
]
}
]
},
// ... lines 58 - 63
};

To see this in action, in your terminal, stop webpack, and then clear out the build/ directory:

rm -rf web/build/*

Ok, come back Webpack!

./node_modules/.bin/webpack --watch

Yes! Now, the filenames are way prettier. And I feel better!

Next! Let's get crazy and move our front-end assets... out of the public directory...