Как сделать ссылку на другие файлы HTML в файле шаблона HTML с помощью html-webpack-plugin - PullRequest
Новая
       17

Как сделать ссылку на другие файлы HTML в файле шаблона HTML с помощью html-webpack-plugin

0 голосов
/ 06 июля 2019

Я использовал html-webpack-plugin для генерации нескольких файлов HTML в папке dist. Они полагаются на свои собственные файлы шаблонов, и когда я обновляю файлы шаблонов, обновляется и «динамическая» версия веб-пакета, которая показывает, что он работает. Моя проблема в том, что я хочу связать другие HTML-файлы в навигационной панели.

Если я сделаю ссылку на файлы шаблона, это не сработает, поскольку источник не совпадает после того, как файлы шаблона скомпилированы в версию веб-пакета.

Внутри webpack.common.js: 

plugins: [
        new HtmlWebpackPlugin({
            template: "./src/templates/template-index.html"
        }),
        new HtmlWebpackPlugin({
            filename: 'subjects.html',
            template: "./src/templates/template-subjects.html"
        }),
        new HtmlWebpackPlugin({
            filename: 'prices.html',
            template: "./src/templates/template-prices.html"
        }),
        new HtmlWebpackPlugin({
            filename: 'faq.html',
            template: "./src/templates/template-faq.html"
        }),
        new HtmlWebpackPlugin({
            filename: 'resources.html',
            template: "./src/templates/template-resources.html"
        }),
        new HtmlWebpackPlugin({
            filename: 'contact.html',
            template: "./src/templates/template-contact.html"
        }),
        new HtmlWebpackPlugin({
            filename: 'reviews.html',
            template: "./src/templates/template-reviews.html"
        })
    ],

Внутри template-index.html: 

<div class="navbar-nav">
          <a class="nav-item nav-link active" href="./template-subjects.html">Subjects</a>
          <a class="nav-item nav-link" href="./template-prices.html">Price guide</a>
          <a class="nav-item nav-link" href="./template-faq.html">FAQ's</a>
          <a class="nav-item nav-link" href="./template-reviews.html">Testimonials</a>
          <a class="nav-item nav-link" href="./template-resources.html">Study resources</a>
          <a class="nav-item nav-link" href="./template-contact.html">Contact us</a>
        </div>

Если я затем запускаю npm build и пытаюсь щелкнуть по ссылкам nav, появляется сообщение об ошибке: Cannot GET /template-subjects.html

...