javascript - Webpack url-loader loading fonts - Stack Overflow

admin管理员组

文章数量:1414853

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

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

• javascript
• webpack
• webpack-dev-server

Share Improve this question Follow asked Apr 21, 2016 at 6:57 GeoGeo 25611 gold badge33 silver badges1010 bronze badges 5

• Not entirely sure but in my setup I copy a folder of assets with the raw-loader. Would that work for you? – Mathijs Segers Commented Apr 21, 2016 at 6:59
• Specify context parameter in your webpack config. – Bob Sponge Commented Apr 21, 2016 at 7:05
• unfortunately specifying context also didnt work – Geo Commented Apr 21, 2016 at 7:25
• In your generated css files path is file:///%path%/dist/assets... ? – Bob Sponge Commented Apr 21, 2016 at 9:16
• @GMolenaar Were you able to find a solution? I have a related issue: stackoverflow./questions/36926521/… – Jay Commented Apr 28, 2016 at 22:25

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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

本文标签： javascriptWebpack urlloader loading fontsStack Overflow