Cannot resolve font-face include using webpack

I am using Aliases in my webpack config to reference my font files. No matter the syntax, I cannot get the font file to resolve correctly. Other similar Stack overflow posts describe similar behavior, but don't offer a solution.

ie: Webpack @font-face relative path issue

What is the proper way to set an alias for fonts and images referenced in SCSS files? What do I need to do to make sure that these supporting assets make it from my src directory to my dist directory?

Here is my Directory structure

/
/src
    /styles
        base.scss
        fonts.scss
        ...
    /fonts
        myFont.eot
        ...
/dist
   /fonts
   /images
   /styles
       site.css

Here is my web.config

var mainCss = new ExtractTextPlugin(pathToStyles + "main.css");
module.exports = {
    entry: './app.js',
    output: { filename: 'bundle.js'},
    resolve: {
        alias: {
            'fonts': path.resolve(__dirname, "src/fonts"),
            'styles': path.resolve(__dirname, "src/styles")
        }
    },
    module: {
        loaders: [
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file?name=dist/fonts/[name].[ext]'
            },
            {
                test: /\.scss$/,
                loader: mainCss.extract({fallback: "style-loader", use: [{
                    loader: "css-loader"
                }, {
                    loader: "sass-loader"
                }]
                })
            },
            {
                test: /src\/\.css$/,
                loader: ExtractTextPlugin.extract({fallback: "style-loader", use: ["css-loader"]})
            }]
    },
    plugins: [ mainCss ]
};

app.js

require('./src/site.scss');
console.log('hey');

fonts.scss

@font-face {
    font-family: 'myFont';
    src: url('~fonts/myFont.eot');
}

site.scss

@import "~styles/base/_fonts";
body {
    color: red;
}
a {
    font-weight:bold;
    font-family: 'myFont';
}