как включить загрузчики в вебпаке? - PullRequest
Новая
       15

как включить загрузчики в вебпаке?

0 голосов
/ 30 апреля 2018

Я пытаюсь включить Header.html, а также footer.html внутри index.html. Потому что я собираюсь использовать эти два файла как общие для всех страниц. Поскольку мой исследовательский веб-пакет не позволяет импортировать файлы как 

<!--#include file="header.html"-->

Я пытался ворчать, я работал нормально. Но как это сделать в вебпаке

это мои подробности о версии веб-пакета 

"name": "webpack-boilerplate",
"version": "1.0.0",

вот что я попробовал ... в моем webpack.config.js файле 

{ 
   test: /\.html$/, 
   loader: 'html-loader' 
 }

в моем index.html файле 

<body>
    require("html-loader!./file.html");
    <div class="banner">
        <h3>Banner 1</h3>
    </div>
    <div class="banner banner2">
        <h3>Banner 2</h3>
    </div>
</body>

но отображается на странице enter image description here

и это не для реакции. Это только для веб-сайта и нормального HTML ..

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

1 Ответ

0 голосов
/ 02 мая 2018

html-webpack-plugin поддерживает шаблоны с переменными.

Вы можете определить переменные в вашем webpack.config.js 

new HtmlWebpackPlugin({
    template: './src/index.html',
    header: '<h1>hello world</h1>',
    fotter: '<b>Footer</b>'
}),

И поместите их в ваш index.html примерно так: 

<html>
    <head></head>
    <body>
        <%= htmlWebpackPlugin.options.header %>
        <!-- all your standard template here -->
        <%= htmlWebpackPlugin.options.footer %>
    </body>
</html>

Чтобы загрузить верхний и нижний колонтитулы из обычных HTML-файлов, требуется дополнительный шаг, и для этого мы используем встроенный пакет узла fs (его не нужно устанавливать). 

let fs = require('fs');

const header = fs.readFileSync(__dirname + '/header.html');
const footer = fs.readFileSync(__dirname + '/footer.html');

module.exports = {

    // all of your normal config

    plugins: [
      new HtmlWebpackPlugin({
        template: './src/index.html',
        header: header,
        footer: footer,
      })
     ]
});

Теперь, когда вы запустите webpack, ваш HTML-файл будет вставлен в позиции, которые вы указали в содержимом файлов верхнего и нижнего колонтитула.

...