HTML Частичные файлы с Webpack - PullRequest
Новая
       182

HTML Частичные файлы с Webpack

0 голосов
/ 07 августа 2020

У меня довольно длинный файл HTML. Я хотел бы разделить его на один базовый файл и несколько файлов меньшего размера, которые я затем могу включить в указанный базовый файл. Я использую Webpack, поэтому думаю, что должен быть способ сделать это во время сборки.

Я осмотрелся, попробовал e js -easy-loader , но не смог не заставить его работать. Я не совсем уверен, какой подход является лучшим и есть ли лучшая альтернатива.

По идее, я хочу сделать следующее:

Структура проекта 

index.html
partials
- partial-1.html
- partial-2.html
- ...
- partial-9.html

индекс. html

<html>
<body>

Base file content

<!-- Include partial-1.html -->
<!-- Include partial-2.html -->
<!-- ... -->
<!-- Include partial-9.html -->

More base file content

</body>
</html>

1 Ответ

0 голосов
/ 07 августа 2020

На мой взгляд, лучший подход - решить эту проблему в процессе сборки webpack, что означает подключение к компилятору и создание основного. html из ваших частичных.

Вы можете создать простой плагин который делает это: 

const fs = require("fs");

class BuildHtml {
    constructor(partialHtmls) {
        this.partialHtmls = partialHtmls;
    }
    apply(compiler) {
        // Called before emitting assets to dist folder.
        compiler.hooks.emit.tap('BuildHtml', (compilation) => {
            // Construct main html content from partial htmls.
            let mainHtmlContent = "<html><body>" + this.partialHtmls.join("") + "</body></html>"

            // '/dist/index.html' - should be the index.html output path if you use HtmlWebpackPlugin.
            fs.writeFileSync('/dist/index.html', mainHtmlContent);

            return true;
        });
    }
}

и использует ваш плагин в конфигурации webpack: 

plugins: [
    BuildHtml
]
...