webpack 2 config capable of loading font-awesome fonts

main.scss

@import "~normalize-scss/sass/normalize";
$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome.scss";
@import "bourbon";

webpack.config.js

const path = require('path');

const autoprefixer = require('autoprefixer');
var bourbon = require('node-bourbon').includePaths;

const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
const IgnorePlugin = require('webpack/lib/IgnorePlugin');
const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplacementPlugin');
const DefinePlugin = require('webpack/lib/DefinePlugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
const ProgressPlugin = require('webpack/lib/ProgressPlugin');
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;


//=========================================================
//  VARS
//---------------------------------------------------------
const NODE_ENV = process.env.NODE_ENV;
const IS_ELECTRON = process.env.IS_ELECTRON;

const ENV_DEVELOPMENT = NODE_ENV === 'development';
const ENV_PRODUCTION = NODE_ENV === 'production';
const ENV_TEST = NODE_ENV === 'test';

const HOST = '0.0.0.0';
const PORT = 3000;


//=========================================================
//  LOADERS
//---------------------------------------------------------
const rules = {
  js: {
    test: /\.jsx?$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    query: {
      //cacheDirectory: true,
      presets: ['es2015']
    }
  },
  json: {
    test: /\.json$/,
    loader: 'json-loader'
  },
  componentStyles: {
    test: /\.scss$/,
    loaders: ["style-loader", "css-loader", "sass-loader"],
    exclude: path.resolve(__dirname, 'src/app')
  },
  sharedStyles: {
    test: /\.scss$/,
    loaders: ["style-loader", "css-loader", "sass-loader"],
    // loaders: ["raw-loader", "sass-loader?sourceMap"],
    include: path.resolve(__dirname, 'src/app')
  },
  /* Raw loader support for *.html
   * Returns file content as string
   *
   * See: https://github.com/webpack/raw-loader
   */
  html: {
    test: /\.html$/,
    use: 'raw-loader',
    exclude: [path.resolve('src/index.html')]
  },
  typescript: {
    test: /\.ts$/,
    exclude: [/\.(spec|e2e)\.ts$/, /node_modules/],
    //exclude: /node_modules/,
    use: [
      'awesome-typescript-loader',
      'angular2-template-loader',
      'angular2-router-loader'
    ]
  },
  fonts: {
    test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
    loader: 'file-loader?name=fonts/[name].[ext]'
  },
  fa: [
    {
      test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url-loader?limit=10000&mimetype=application/font-woff'
    },
    {
      test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url-loader?limit=10000&mimetype=application/font-woff'
    },
    {
      test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
    },
    {
      test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'file-loader'
    },
    {
      test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
    }
  ],
  faWP: [
    // the url-loader uses DataUrls. 
    // the file-loader emits files. 
    { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
    { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
  ],
  images: {
    test: /\.(png|jpe?g|gif|ico)$/,
    loader: 'file-loader?name=assets/[name].[hash].[ext]'
  }
};


//=========================================================
//  CONFIG
//---------------------------------------------------------
const config = module.exports = {};

config.resolve = {
  extensions: ['.ts', '.js', '.scss', '.json'],
  mainFields: ['module', 'browser', 'main'],
  modules: [
    path.resolve('.'),
    path.resolve('node_modules')
  ]
};

config.module = {
  rules: [
    rules.js,
    rules.json,
    rules.typescript,
    rules.html,
    rules.images,
    rules.componentStyles,
    rules.fonts,
    //rules.faWP[0],
    //rules.faWP[1],
   // rules.fa[2],
    //rules.fa[3],
   // rules.fa[4]
  ]
};

var fs = require('fs')
const nodeModules = {}
fs.readdirSync('node_modules')
  .filter(x => {
    return ['.bin'].indexOf(x) === -1
  })
  .forEach(mod => {
    nodeModules[mod] = `commonjs ${mod}`
  })
config.externals = [
  nodeModules
]

console.log(['src/public'].concat(bourbon))


config.plugins = [
  new DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
    //'process.env.SOUNDCLOUD_CLIENT_ID': JSON.stringify(process.env.SOUNDCLOUD_CLIENT_ID)
  }),
  new CopyWebpackPlugin([
    { from: 'src/package.json' },
    { from: 'src/e/**/*.js', to: './electron', flatten: true }
  ]),
  new LoaderOptionsPlugin({
    debug: false,
    minimize: ENV_PRODUCTION,
    options: {
      postcss: [
        autoprefixer({ browsers: ['last 3 versions'] })
      ],
      resolve: {},
      sassLoader: {
        //data: "\$environmentVariable:3",
        includePaths: ['src/public'].concat(bourbon),
        // outputStyle: 'compressed',
        precision: 10,
        sourceComments: false
      }
    }
  }),
  new ContextReplacementPlugin(
    /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
    path.resolve('src')
  ),
  // new ForkCheckerPlugin()
];


//=====================================
//  DEVELOPMENT or PRODUCTION
//-------------------------------------
if (ENV_DEVELOPMENT || ENV_PRODUCTION) {
  config.entry = {
    main: './src/main.ts',
    polyfills: './src/polyfills.ts',
    background: './src/bg.ts',
    vendor: './src/vendor.ts'
  };

  config.output = {
    path: path.resolve('./target'),
    publicPath: './',
    filename: '[name].bundle.js'
  };

  config.plugins.push(
    new CommonsChunkPlugin({
      name: ['polyfills'],
      minChunks: Infinity
    }),
    new HtmlWebpackPlugin({
      title: 'PhotoSpring - Main application',
      chunkSortMode: 'dependency',
      filename: 'index.html',
      hash: false,
      inject: 'body',
      chunks: ['polyfills', 'main', 'vendor'],
      template: './src/public/index.html'
    }),
    new HtmlWebpackPlugin({
      title: 'PhotoSpring - Background operations',
      chunkSortMode: 'dependency',
      filename: 'background.html',
      hash: false,
      inject: 'body',
      chunks: ['polyfills', 'background'],
      template: './src/public/background.html'
    })
  );
}


//=====================================
//  DEVELOPMENT
//-------------------------------------
if (ENV_DEVELOPMENT) {
  config.devtool = 'cheap-module-source-map';

  config.output.filename = '[name].js';

  config.module.rules.push(rules.sharedStyles);

  config.plugins.push(new ProgressPlugin());

  config.devServer = {
    contentBase: './src',
    historyApiFallback: true,
    host: HOST,
    port: PORT,
    stats: {
      cached: true,
      cachedAssets: true,
      chunks: true,
      chunkModules: false,
      colors: true,
      hash: false,
      reasons: true,
      timings: true,
      version: false
    }
  };
}


//=====================================
//  PRODUCTION
//-------------------------------------
if (ENV_PRODUCTION) {
  config.devtool = 'hidden-source-map';

  config.output.filename = '[name].[chunkhash].js';

  config.module.rules.push({
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract('css?-autoprefixer!postcss!sass'),
    include: path.resolve('src/shared/styles')
  });

  config.plugins.push(
    new WebpackMd5Hash(),
    new ExtractTextPlugin('styles.[contenthash].css'),
    new UglifyJsPlugin({
      comments: false,
      compress: {
        dead_code: true, // eslint-disable-line camelcase
        screw_ie8: true, // eslint-disable-line camelcase
        unused: true,
        warnings: false
      },
      mangle: {
        screw_ie8: true  // eslint-disable-line camelcase
      }
    })
  );
}

config.target = 'electron-renderer';

//=====================================
//  TEST
//-------------------------------------
if (ENV_TEST) {
  config.devtool = 'inline-source-map';

  config.module.rules.push(rules.sharedStyles);
}