webPack Config with font and img support

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')



module.exports = {
  entry: {
    app: './src/js/index.jsx'
  },

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
    // this publicPath will prevent from loading bundle.js and app.css from wrong directions 
    // (like localhost:3000/pageName/subPageName/app.css or same applies to bundle.js file nighter)
    // and it will make sure that you alyas load your css and bundle js file from 
    // localhost:3000/app.css and localhost:3000/bundle.js without giving shit about nested routes...
  },

  resolve: {
    extensions: ['.js' , '.jsx']
  },

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader','sass-loader'],
          publicPath: '/dist'
        })
      },
      // { // this is for class names like _W3de some wierd class name generated by webpack
      //   test: /\.(css|scss)$/,
      //   use: ExtractTextPlugin.extract({
      //     fallback: 'style-loader',
      //     publicPath: '/dist',
      //     use: [
      //       {
      //         loader: 'css-loader',
      //         options: {
      //           modules: true,
      //           sourceMap: false,
      //           importLoaders: true,
      //           // localIdentName: "[name]__[local]___[hash:base64:5]"
      //           // localIdentName: '[path]-[name]__[local]--[hash:base64:5]'
      //           localIdentName: "_[hash:base64:5]"
      //         }
      //       },
      //       {
      //         loader: 'sass-loader',
      //         options: {
      //           sourceMap: true
      //         }
      //       }
      //     ],
      //   })
      // },
      {
        test: /\.(jpg|jpeg|png|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]',
              outputPath: 'img/',
              publicPath: 'img/', // this line will remove the dist from images addres in app.css after build
              // problem was if you use any image in sass files the addres swould be like /distimg/blah.jpeg but this line will; convert it to img/blah.jpeg
              context: 'src/images' // grab all images from here and keep folder structure
            }
          }
        ]
      }, 
      {
        test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
                name: '[path][name].[ext]',
                outputPath: 'fonts/',
                publicPath: 'fonts/', // this line will remove the dist from fonts addres in app.css after build
                context: 'src/fonts' // grab all fonts from here and keep folder structure
            }
          }
        ]
      }
    ]
  },

  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/index.html',
      minify: {
        collapseInlineTagWhitespace: true,
        collapseWhitespace: true,
      }
    }),

    new ExtractTextPlugin({
      filename: 'app.css',
      disable: false,
      allChunks: true
    })
  ],

  devServer: {
    contentBase: path.join(__dirname , 'dist'),
    compress: true,
    port: 3000,
    open: true,
    // https: true,
    // host: '127.0.0.5',
    historyApiFallback: true,
    stats: 'minimal',
  }
}

her eis pkg.json file for this https://gist.github.com/ErEllison/99fc7c615d9cd02234d867450b970782

also make sure to use this module(savage) : https://www.npmjs.com/package/webpack-bundle-analyzer