Preserving folder structure in output directory with webpack

I have the following folder structure:

/index.html
/app/index.tsx

After bundling with webpack, I would like to have the following ouput directory with the bundle.js injected into the index.html

/dist/index.html
/dist/app/bundle.js
/dist/app/bundle.js.map

I have the following webpack configuration

var webpack = require("webpack")
var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = [
    {
        entry: "./app/index",
        output: {
            path: "./dist/app",
            filename: "bundle.js"
        },
        devtool: "source-map",
        resolve: {
            extensions: ["", ".tsx", ".ts", ".js"]
        },
        plugins: [
            new webpack.optimize.UglifyJsPlugin(),
            new HtmlWebpackPlugin({
                "filename": "./index.html",
                "template": "html!./index.html"
            })
        ],
        module: {
            loaders: [
            { test: /\.tsx?$/, loader: "ts-loader" },
            ]
        }
    }, 
    {
        output: {
            path: "./dist",
            filename: "bundle.js"
        },
        plugins: [
            new HtmlWebpackPlugin({
                "filename": "./index.html",
                "template": "html!./index.html"
            })
        ]    
    }
]

It seems to work fine, but the script bundle.js is not injected into the index.html as expected. The HtmlWebpackPlugin is supposed to do this. What am I doing wrong?