如何在Webpack中包含加载器？

Question

如何在Webpack中包含加载器？

9

我正在尝试将Header.html和footer.html包含在index.html中。因为我将使用这两个文件作为所有页面的共用文件。根据我的研究，Webpack不允许导入文件作为HTML。

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

我曾尝试在grunt中实现，效果不错。但如何在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>

但它在页面中显示

这不适用于React，仅适用于网站和普通的HTML。

那么怎么做呢？

- user1731387

你是否正在使用html-webpack-plugin来加载index.html文件？ - lukas-reineke

是的 @lukas-reineke - user1731387

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- lukas-reineke · Accepted Answer

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文件将被注入到你指定位置，并包含你的头部和底部文件的内容。