Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.08.2018, 15:29
Профессор
Отправить личное сообщение для Shitbox2 Посмотреть профиль Найти все сообщения от Shitbox2
 
Регистрация: 04.10.2010
Сообщений: 571

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;

Последний раз редактировалось Shitbox2, 02.08.2018 в 15:45.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как обработать css в webpack? karssen Сборка проекта, утилиты 0 03.02.2016 13:51
Gulp watcher и Babel. Как компилировать только измененный файл? FINoM Оффтопик 9 27.09.2015 21:04
А как вы тестируете приложение написанное на ES6? kuzroman Сборка проекта, утилиты 4 23.09.2015 13:51
Как скачать файл через JS? Dimaz Events/DOM/Window 9 20.07.2014 22:20
JavaScript как файл закодировать base64? Трактор AJAX и COMET 3 10.06.2008 13:22