Static assets and fonts

[proov]

Hello there !

I used your webpack starter this week end for a small project. It's perfect and exactly what i was looking for 😻 However i was wondering if you you had planned to handle static assets (images) and web fonts ?

For exemple, in my small project, i created a small canvas with pixi.js and i use some images inside. What's the best way to use images ?

Thanks 👍

[lifenautjoe]

Hello there @proov !

Sorry for the delay, I believe we are in different timezones.

For asset loading the project comes with the webpack plugin url-loader.

Loading images

In JavaScript

You can require an image from your JavaScript like

const myImage = require('./assets/icon.png');

If the image size in bytes is smaller than 8192you, myImage will be a string with the encoded image path such as

data:image/svg+xml;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJhc3NldHMvaW1hZ2VzL3RpY2stQ3lydkhSdi5zdmciOw==

If the image size is larger than 8192 it will be a string with the url to the image such as

src/assets/icon.png?hash=5b1f36bc41ab31f5b801

This limit is set so images like icons are not loaded through a request but you can force the loader to give you image urls always by doing the following but should not be necessary. The limit works 90% of the time.

const myImage = require('!!url!/assets/icon.png');

What this all means is that on your Pixi case, you can do the following

const spriteImgUrl = require('./assets/sprite.png');

PIXI.loader.add([
    {
        name: 'character',
        url: spriteImgUrl
    }
]);

In index.html

If you would like to include an image on your index.html file, place the path of the image in a webpack require statement<%= require(imagePath) %>.

  <img class="splash-title__img"
                     src="<%= require('./src/assets/logo-on-dark-bg.png') %>"
                     alt="webpack logo"></a>

Loading fonts

If you don't support Opera Mini, browsers support the .woff format. Its newer version .woff2, is widely supported by modern browsers and can be a good alternative.

If you decide to use only this format you can load the fonts in a similar manner to images.

In your webpack.dev.js and webpack.prod.js add the following

module.exports = {
    // ..
    module: {
        rules: [
            // ..
            {
                test: /\.woff$/,
                loader: 'url-loader',
                options: {
                    // Limit at 50k. Above that it emits separate files
                    limit: 50000,
                    // url-loader sets mimetype if it's passed.
                    // Without this it derives it from the file extension
                    mimetype: 'application/font-woff',
                    // Output below fonts directory
                    name: './fonts/[name].[ext]',
                },
            }
            // ..
        ]
    }
    // ..
};

And let's say your font is in the folder assets with the name pixel.woff

You can add it and use it in index.scss as

@font-face {
    font-family: "Pixel";
    src: url('./../assets/pixel.woff') format('woff');
}

.body{
    font-family: 'Pixel', sans-serif;
}

If you would like to support all kinds of font types, remove the woff rule we previously added to webpack.dev.js and webpack.prod.js and add the following

module.exports = {
    // ..
    module: {
        rules: [
            // ..
            {
                test: /\.(ttf|eot|woff|woff2)$/,
                loader: 'file-loader',
                options: {
                    name: 'fonts/[name].[ext]',
                },
            }
            // ..
        ]
    }
    // ..
};

And assuming you have your fonts in the directory assets with names pixel.woff, pixel.ttf, pixel.eot , etc.

You can add it and use it in index.scss as

@font-face {
    font-family: 'Pixel';
    src: url('./../assets/pixel.woff2') format('woff2'),
    url('./../assets/pixel.woff') format('woff'),
    url('./../assets/pixel.eot') format('embedded-opentype'),
    url('./../assets/pixel.ttf') format('truetype');
    /* Add other formats as you see fit */
}

Cheers!

[proov]

Hey @lifenautjoe !

Woooh thanks so much for all your explanations 😍 🙌

I'm supporting only woff format :) gonna try this out as soon as possible !! 👍

[proov]

I tried, everything is working as expected 😻 Thank you @lifenautjoe your webpack starter is really awesome !

[lifenautjoe]

Glad to hear @proov ! 😁