Error using Webpack: Cant seem to set correct path for directive templates

Question

Here below is a snippet of my directive, before without using webpack I used the templateUrl version, worked fine. Ive included also my webpack.config file. I can't seem to figure this out.

function footerContent() {
  'use strict';

  console.log('footerContent');


  return {
    restrict: 'E',
    scope: false,
    template: require('./footer-area.html')
  };
}

// angular
//  .module('alpha')
//  .directive('footerContent', footerContent);

module.exports = function(ngModule) {
  'use strict';

  ngModule.directive('footerContent', footerContent);
};

Running Webpack command results in this error, I know its trying to reach the file in the wrong directory but I tried several variations of the paths for the dir with no success :

ERROR in . / scripts / Directive / headerContent.js
Module not found: Error: Cannot resolve 'file'
or 'directory'. / header - area.html in / app / scripts / Directive@. / scripts / Directive / headerContent.js 10: 12 - 41

ERROR in . / scripts / Directive / footerContent.js
Module not found: Error: Cannot resolve 'file'
or 'directory'. / footer - area.html in / app / scripts / Directive@. / scripts / Directive / footerContent.js 10: 12 - 41

ERROR in . / scripts / Directive / contentArea.js
Module not found: Error: Cannot resolve 'file'
or 'directory'. / home.html in / app / scripts / Directive@. / scripts / Directive / contentArea.js 10: 12 - 34

ERROR in . / scripts / Directive / socialMediabuttons.js
Module not found: Error: Cannot resolve 'file'
or 'directory'. / social - media - buttons.html in /Users/Tim / Desktop / P / TimothyLombrana / app / scripts / Directive@. / scripts / Directive / socialMediabuttons.js 10: 12 - 50

Here is mywebpack config file:

module.exports = {
  context: __dirname + '/app',
  entry: './index.js',
  output: {
    path: __dirname + '/app',
    filename: 'bundle.js'
  },

  module: {
    loaders: [{
      test: /\.html$/,
      loader: 'raw',
      exclude: /node_modules/
    }]
  }
};