Webpack erroring on bundling font awesome - css

Question

I'm having issues with my webpack build (v3), it's a migration from v1 however, it breaks on the importing of the font-awesome file (css) I have on my app.js page. This is the response from webpack:
ERROR in ./node_modules/font-awesome/css/font-awesome.css
Module parse failed: /../node_modules/font-awesome/css/font-awesome.css Unexpected character '#' (7:0)
You may need an appropriate loader to handle this file type.
| /* FONT PATH
| * -------------------------- */
| #font-face {
| font-family: 'FontAwesome';
| src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
Below is my config file:
const NODE_ENV = process.env.NODE_ENV;
const path = require('path');
const join = path.join;
const resolve = path.resolve;
const root = resolve(__dirname);
const src = join(root, 'src');
const chalk = require('chalk');
const autoprefixer = require('autoprefixer');
const precss = require('precss');
const cssnano = require('cssnano');
const dotenv = require('dotenv');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const _ = require('lodash');
const env = process.env.NODE_ENV || 'development';
const dotEnvVars = dotenv.config();
const environmentEnv = dotenv.config({
path: path.join(root, 'config', `${NODE_ENV}.config.js`),
silent: true,
});
const envVariables = _.merge({}, dotEnvVars, environmentEnv);
const defines = Object.keys(envVariables).reduce(
function (memo, key) {
const val = JSON.stringify(envVariables[key]);
memo[`__${key.toUpperCase()}__`] = val;
return memo;
},
{
__NODE_ENV__: JSON.stringify(NODE_ENV),
__DEBUG__: NODE_ENV === 'development',
}
);
const webpackConfig = {
target: 'web',
devtool: 'cheap-eval-source-map',
entry: {
app: path.resolve('src/app.js'),
},
output: {
path: path.resolve('dist/'),
publicPath: '/',
filename: 'app.js',
},
cache: true,
devServer: {
hot: true,
overlay: true,
compress: true,
lazy: true,
stats: {
assets: true,
chunks: true,
colors: true,
modules: true,
modulesSort: 'field',
publicPath: true,
version: true,
reasons: true,
},
watchOptions: {
ignored: /node_modules/,
},
historyApiFallback: {
disableDotRule: true,
},
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: ['es2015', 'stage-0', 'react', 'react-hmre'],
},
},
{
test: /\.css$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{ loader: 'css-loader', query: { sourceMap: true } }, 'postcss-loader'],
}),
},
{
test: /\.(svg|woff|woff2|ttf|eot|otf)(\?v=[a-z0-9]\.[a-z0-9]\.[a-z0-9])?$/,
use: [{ loader: 'file-loader', options: { name: '[name].[ext]' } }],
},
{
test: /\.otf(\?\S*)?$/,
exclude: /node_modules/,
use: [{ loader: 'url-loader', options: { limit: 10000 } }],
},
{
test: /\.eot(\?\S*)?$/,
exclude: /node_modules/,
use: [{ loader: 'url-loader', options: { limit: 10000 } }],
},
{
test: /\.svg(\?\S*)?$/,
exclude: /node_modules/,
use: [{ loader: 'url-loader', options: { mimetype: 'image/svg+xml', limit: 10000 } }],
},
{
test: /\.ttf(\?\S*)?$/,
exclude: /node_modules/,
use: [
{ loader: 'url-loader', options: { mimetype: 'application/octet-stream', limit: 10000 } },
],
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
exclude: /node_modules/,
use: [
{
loader: 'url-loader',
options: { mimetype: 'application/font-woff', limit: 10000, name: './[hash].[ext]' },
},
],
},
{
test: /\.(jpe?g|png|gif)$/,
exclude: /node_modules/,
use: [{ loader: 'url-loader', options: { limit: 10000 } }],
},
],
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
}),
new webpack.DefinePlugin(defines),
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
title: 'Privacy Dashboard',
template: 'default.ejs',
inject: true,
hash: true,
}),
new webpack.LoaderOptionsPlugin({
options: {
context: src,
postcss: [precss(), autoprefixer(), cssnano()],
},
}),
new ExtractTextPlugin({ filename: 'app.css', disable: false, allChunks: true }),
],
resolve: {
modules: [path.resolve('src'), 'node_modules'],
extensions: ['.css', '.js', '.jsx'],
alias: {
css: join(src, 'styles'),
containers: join(src, 'containers'),
components: join(src, 'components'),
utils: join(src, 'utils'),
styles: join(src, 'styles'),
demo: join(src, 'demo'),
stores: join(src, 'stores'),
config: join(src, 'config', env),
},
},
node: {
fs: 'empty',
net: 'empty',
tls: 'empty',
},
performance: {
hints: false,
},
};
module.exports = webpackConfig;