CODEWITHSUNDEEP
javascriptwebpackwebpack-dev-server
Geo
Geo

Reputation: 256

Webpack url-loader loading fonts

I'm using webpack to bundle my Angular2 app , including images/sass and fonts. I use gulp with webpack/webpackstream & webpack-dev-server to serve either a dev server or create a build. Everything works fine except that I cannot get the fonts to work whenever I create a build.

Below you will see a part of the webpack config, gulpfile, css file and my folder structure.

Whenever I use webpack-dev-server I can see in the network tab that the font has been loaded ([hash].woff) correctly from /assets/fonts/

When I run a build the fonts are not created in ./dist/assets/fonts and I get a console error saying (Failed to load resource: file:///%path%/dist/assets/fonts/e13dca925b232dd96ae6bc48b7b7264b.woff net::ERR_FILE_NOT_FOUND)

I have been unlucky so far with google or even stackoverflow, I hope someone has any idea what i'm doing wrong.

Thank you so much in advance.

Webpack Config

entry: {
    styles: "./client/sass/main",
    scripts: "./client/app/main",
    polyfills: [
        "./node_modules/es6-shim/es6-shim",
        "./node_modules/angular2/bundles/angular2-polyfills"
    ]
},
module: {
    loaders: [
        {
            test: /\.ts/, loaders: ['ts-loader'], exclude: /node_modules/
        },
        {
            test: /\.scss$/,
            loaders: ['style', 'css', 'postcss', 'sass']
        },
        {
            test: /\.html$/,
            loader: "html"
        },
        {
            test: [/\.png$/,/\.jpg$/,/\.jpeg$/],
            loader: "url-loader?mimetype=image/png"
        },
        {
            test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,   loader: "url-loader?limit=10000&mimetype=application/font-woff&name=./assets/fonts/[hash].[ext]"
        },
        {
            test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,  loader: "url-loader?limit=10000&mimetype=application/font-woff&name=./assets/fonts/[hash].[ext]"
        },
        {
            test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,    loader: "url-loader?limit=10000&mimetype=application/octet-stream&name=./assets/fonts/[hash].[ext]"
        },
        {
            test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,    loader: "file-loader"
        },
        {
            test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,    loader: "url-loader?limit=10000&mimetype=image/svg+xml&name=./assets/fonts/[hash].[ext]"
        }
    ]
},

main.scss

@font-face {
    font-family:'senticosansdtlight';
    src: url('../assets/fonts/senticosansdt-light-webfont.eot');
    src: url('../assets/fonts/senticosansdt-light-webfont.eot?#iefix')     format('embedded-opentype'),
    url('../assets/fonts/senticosansdt-light-webfont.woff') format('woff'),
    url('../assets/fonts/senticosansdt-light-webfont.ttf') format('truetype'),
    url('../assets/fonts/senticosansdt-light-webfont.svg#senticosansdtlight') format('svg');
    font-weight: normal;
    font-style: normal;
 }

Gulpfile

// Webpack:build creates the bundles that are specified in  webpack.prod.js
gulp.task("webpack:build", function() {
return gulp.src('')
    .pipe(webpackStream(require('./webpack.prod.js')))
    .pipe(gulp.dest('./dist'));});

//webpack dev server
gulp.task("webpack-dev-server", function(callback) {
new WebpackDevServer(webpack(webpackConfig), {
    stats: {
        colors: true
    },
    contentBase: config.src.base
}).listen(8080, "localhost", function(err) {
    if(err) throw new gutil.PluginError("webpack-dev-server", err);
    gutil.log("[webpack-dev-server]", "http://localhost:8080/webpack-dev-server/index.html");
});
});

Folder structure

dist/
client/
     app/
          main.js
     assets/
          fonts/
     sass/
          main.scss

Upvotes: 1

Views: 9444

Answers (1)

Rhonin
Rhonin

Reputation: 494

Use /assets/fonts/[name].[ext] instead of /assets/fonts/[hash].[ext]

Upvotes: 3

Related Questions