Вопрос не совсем по 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;