Webpack. Как обернуть файл в es6-модуль?
 

Вопрос не совсем по JS, но может кто знает как в последнем Вебпаке подключить html и css как es6-модуль, но сделать это через файл!

Другими словами, сейчас я в my-script.ts пишу:

import template from './my-module.html';
import style from './my-module.scss';

И с помощью пары распространенных лоадеров это импортируется как текстовая строка.

А нужно, чтобы эти ресурсы предварительно конвертились в ts-файлы my-module.html.ts и my-module.css.ts примерно следующего содержания:

export default '<html/css content>' //или именнованный экспорт, не важно

В my-script.ts я бы импортил их как обычные ts-файлы с модулями и сборка продолжалась бы уже с учетом их.

Как это сделать?

P.S. Текущий конфиг:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const webpackConfig = {
    mode: 'development',
    entry: './index.ts',
    devtool: 'source-map',
    devServer: {
        contentBase: './',
        host: 'localhost',
        port: 3080,
        watchOptions: {
            ignored: /node_modules/
        },
        inline: true
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                loader: 'awesome-typescript-loader?configFileName=./tsconfig.json',
                exclude: /node_modules/
            },
            {
                test: /\.(css|scss)$/,
                use: [
                    {
                        loader: 'css-loader',
                        options: {
                            localIdentName: 'my-module'
                        }
                    },
                    {
                        loader: 'resolve-url-loader',
                    },
                    {
                        loader: 'sass-loader?outputStyle=expanded&sourceMap',
                    },
                ],
            },
            {
                test: /\.html$/,
                use: {loader: 'html-loader?exportAsEs6Default'}
            }, {
                test: /\.(eot|ttf|woff|woff2)$/,
                loader: 'file-loader?name=fonts/[name].[ext]',
            }, {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loader: 'url-loader?limit=10000&hash=sha512&digest=hex&name=[hash].[ext]',
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js', '.css', '.scss', '.html', '.json']
    },
    output: {
        filename: 'my-module.js',
        path: path.resolve(__dirname, 'dist'),
        library: 'my-module',
        libraryTarget: 'umd',
        umdNamedDefine: true
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'index.html'
        })
    ]
};

module.exports = webpackConfig;