Webpack HtmlWebpackPlugin not displaying pages

I am new to webpack so this is probably something silly.

My current file structure is as follows

---src
------css
---------colors.sass
---------main.sass
------img
---------img1.png
------js
---------app.js
---------alert.js
---index.html
---test.html
package.json
webpack.config.js

My webpack.config.js is as follows

//NPM
var path = require('path');
var webpack = require('webpack');
var _ = require('underscore');

//Plugins
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');

var extractPlugin = new ExtractTextPlugin({
    filename: 'main.css'
});

module.exports = {
    entry: {
        app: './src/js/app.js',
        alert: './src/js/alert.js'
    },
    devtool: 'eval',
    devServer: {
        contentBase: './dist',
        host: 'localhost',
        port: 8080,
        hot: true,
        noInfo: false,
        inline: true
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[hash].js'
    },
    module: {
        rules: [{
                test: /\.js$/,
                loaders: ['babel-loader'],
                exclude: /node_modules/,
                include: __dirname
            },
            {
                test: /\.sass$/,
                use: extractPlugin.extract({
                    use: ['css-loader', 'sass-loader']
                })
            },
            {
                test: /\.html$/,
                use: ['html-loader']
            },
            {
                test: /\.(jpg|png)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'img/'
                    }
                }]
            },
            {
                test: /\.html$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: '/'
                    }
                }],
                exclude: path.resolve(__dirname, 'index.html')
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            chunks: ['app'],
            filename: 'index.html',
            template: './src/index.html'
        }),
        new HtmlWebpackPlugin({
            chunks: ['alert'],
            filename: 'test.html',
            template: './src/test.html'
        }),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery",
            _: "underscore"
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            // ...
        }),
        new CleanWebpackPlugin(['dist']),
        extractPlugin
    ]
};

My package.json scripts

"scripts": {
        "start": "webpack-dev-server --config webpack.config.js --inline --progress --colors",
        "build": "webpack --config webpack.config.js --progress --profile --colors",
        "prod": "webpack -p"
    },

In app.js & alert.js I simply have console logs. In index.html & test.html I just have a basic HTML5 layout and H1 tags with the page name.

I wanted to be able to go to index.html and only use app.js and in test.html to only use alert.js

Now, when I run npm run start I get the following appearing on the page, inside the body of the HTML.

module.exports = __webpack_public_path__ + "/index.html";

In the console, there are no errors but the console logs from either app.js or alert.js do appear, but the HTML doesn't render. Any idea why?