Question

我想在Header.html内加入footer.html和index.html。因为我将使用这两个文件作为所有页面的通用文件。由于我的研究webpack不允许导入文件

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

我试过咕噜声我工作正常。但是在webpack中怎么做

这是我的webpack版本详细信息

"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>

但它显示在页面

中

这不是为了反应。这仅适用于网站和普通的HTML ..

那怎么办呢？

Answer 1

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文件将被注入您使用页眉和页脚文件内容指定的位置。

如何在webpack中包含加载器？

1 个答案: