Webpack url-loader loading fonts
<p>I'm using webpack to bundle my Angular2 app , including images/sass and fonts. I use gulp with webpack/webpackstream &amp; 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.</p>

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

<p>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/ </p>

<p>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)</p>

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

<p>Thank you so much in advance.</p>

<p><strong>Webpack Config</strong></p>

<pre><code>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&amp;mimetype=application/font-woff&amp;name=./assets/fonts/[hash].[ext]"
        },
        {
            test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,  loader: "url-loader?limit=10000&amp;mimetype=application/font-woff&amp;name=./assets/fonts/[hash].[ext]"
        },
        {
            test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,    loader: "url-loader?limit=10000&amp;mimetype=application/octet-stream&amp;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&amp;mimetype=image/svg+xml&amp;name=./assets/fonts/[hash].[ext]"
        }
    ]
},
</code></pre>

<p><strong>main.scss</strong></p>

<pre><code>@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;
 }
</code></pre>

<p><strong>Gulpfile</strong></p>

<pre><code>// 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");
});
});
</code></pre>

<p><strong>Folder structure</strong></p>

<pre><code>dist/
client/
     app/
          main.js
     assets/
          fonts/
     sass/
          main.scss
</code></pre>