angularjs - Webpack 使用時のエラー: ディレクティブ テンプレートの正しいパスを設定できないようです

Question

以下は、webpack を使用せずに templateUrl バージョンを使用する前に、私のディレクティブのスニペットです。私の webpack.config ファイルも含めました。私はこれを理解できないようです。

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);
};

Webpack コマンドを実行すると、このエラーが発生します。間違ったディレクトリにあるファイルに到達しようとしていることはわかっていますが、ディレクトリのパスのいくつかのバリエーションを試してみましたが、成功しませんでした:

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

これが mywebpack 構成ファイルです。

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

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