html埋め込み

webpackのhtml-loaderを使ってhtmlをjavascriptで読み込んだ使う。

html-loaderのインストール。 npm install html-loader

webpack.config.jsを設定

module.exports = {
    entry: './app.js',
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js";
    },
    module: {
        loaders: [
            { test: /\.html$/, loader: 'html-loader' },//←　これ
        ]
    },
};

jsでhtmlを読み込んで挿入する。

declare function require(x: string): any;
let html = require('./keyboard.html');
let div = document.getElementById("keyboard") as HTMLDivElement;
div.innerHTML = html;