title: Webpack doesn't bundle my HTML files
body: <p>For some reason I currently don't understand, webpack does not bundle my HTML files into the bundles it generates. It bundles everything else, but sadly not my HTML files.</p>
  
  <p>I'm using Angular 2, and have included a dependency on:</p>
  
  <pre><code>"html-loader": "^0.4.4",
  "html-webpack-plugin": "^2.22.0",
  </code></pre>
  
  <p>The webpack.config:</p>
  
  <pre><code>var webpack = require('webpack');
  var HtmlWebpackPlugin = require('html-webpack-plugin');
  var helpers = require('./helpers');
  
  module.exports = {
      entry: {
          app: 'app/main.ts'
      },
  
      output: {
          path: helpers.root('dist'),
          publicPath: 'http://localhost:8080/',
          filename: 'bundle.js'
      },
  
      externals: [
          {
              './node_modules/core-js/client/shim.min.js': 'shim',
              './node_modules/zone.js/dist/zone.js': 'zone',
              './node_modules/reflect-metadata/Reflect.js': 'reflect',
              './node_modules/x2js/x2js.js': 'x2js'
          }
      ]
  }
  </code></pre>
  
  <p>The webpack.common:</p>
  
  <pre><code>var webpack = require('webpack');
  var HtmlWebpackPlugin = require('html-webpack-plugin');
  var ExtractTextPlugin = require('extract-text-webpack-plugin');
  var helpers = require('./helpers');
  
  module.exports = {
    entry: {
      'app': './app/main.ts'
    },
  
    resolve: {
      extensions: ['', '.js', '.ts', '.html']
    },
  
    module: {
      loaders: [
        {test: /\.ts$/, loaders: ['awesome-typescript-loader', 'angular2-template-loader']},
        {test: /\.html$/, loader: 'raw-loader' },
        {
          test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
          loader: 'file?name=assets/[name].[hash].[ext]'
        },
        {
          test: /\.css$/,
          exclude: helpers.root('app'),
          loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
        },
        {
          test: /\.css$/,
          include: helpers.root('app'),
          loader: 'raw'
        }
      ]
    },
  
    plugins: [
      new webpack.optimize.CommonsChunkPlugin({
        name: ['app', 'vendor', 'polyfills']
      }),
  
      new HtmlWebpackPlugin({
        template: 'index.html',
        chunksSortMode: 'dependency'
      })
    ]
  };
  </code></pre>
  
  <p>And the webpack.prod:</p>
  
  <pre><code>var webpack = require('webpack');
  var webpackMerge = require('webpack-merge');
  var ExtractTextPlugin = require('extract-text-webpack-plugin');
  var commonConfig = require('./webpack.common.js');
  var helpers = require('./helpers');
  
  module.exports = webpackMerge(commonConfig, {
    devtool: 'source-map',
  
    output: {
      path: helpers.root('dist'),
      publicPath: '/',
      filename: '[name].[hash].js',
      chunkFilename: '[id].[hash].chunk.js'
    },
  
    htmlLoader: {
      minimize: false // workaround for ng2
    },
  
    plugins: [
      new webpack.NoErrorsPlugin(),
      new webpack.optimize.DedupePlugin(),
      new ExtractTextPlugin('[name].[hash].css')
    ]
  });
  </code></pre>
  
  <p>And I'm pulling in my HTML in my components via:</p>
  
  <pre><code>@Component({
    ....
    template: require('app/customer-client/customer-client.html'),
    ....
    )}
  </code></pre>
  
  <p>As far as I know from the <a href="https://github.com/webpack/html-loader" rel="nofollow">docs</a>, that should be enough I think, but I'm still missing something.</p>
  
  <p>Note that I have also tried using raw-loader, which also failed to bundle the HTML files. I wondered if the format of import needed to be closer to "require("html!./file.html");" so I tried that too, without success. I don't get any errors, or any debugging information, unfortunately all I have are missing HTML files. Any ideas?</p>