Importing html files with es6 template string loader

The solution posted here is correct. Just adding an info to the error i faced when implementing the solution mentioned.

I got the error: TS2307: Cannot find module './index3.html'
This was because of typescript compilation error. The work around was here

Had to define a file: html.d.ts containing the below

declare module '*.html' {
  const value: string;
  export default value
}

Consider using Raw Loader.

Your webpack configuration will contain this:

...
    module: {
        rules: [
            {
                test: /\.tpl.html$/,
                use: 'raw-loader'
            }
        ]
    }
...

In your code write

import tpl from './mytemplate.html';

I recently needed to do the same thing, and this is how I did it.

1. I used the npm module html-loader, instead of es6-template-string-loader

2. Add to webpack.config.js

Webpack 3

...
module: {
    rules: [
        {
            test: /\.html$/,
            exclude: /node_modules/,
            use: {loader: 'html-loader'}
        }
    ]
}
...

Webpack 1 (deprecated, but from original answer):

...
module: {
    loaders: [
        {
            test: /\.html$/,
            loader: "html-loader"
        }
    ]
}
...

3. Use in your JS files

import template from './header.html';