Webpack doesn't bundle my HTML files

Question

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.

I'm using Angular 2, and have included a dependency on:

"html-loader": "^0.4.4",
"html-webpack-plugin": "^2.22.0",

The webpack.config:

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'
        }
    ]
}

The webpack.common:

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

And the webpack.prod:

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

And I'm pulling in my HTML in my components via:

@Component({
  ....
  template: require('app/customer-client/customer-client.html'),
  ....
  )}

As far as I know from the docs, that should be enough I think, but I'm still missing something.

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?

Answer 1

In your webpack configuration, did you add '.html' to the resolve.extensions array as well?

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