如何在 webpack 中包含加载器? [英] how to include loaders in webpack?

查看：25 发布时间：2021/12/18 18:39:47 webpack header include

本文介绍了如何在 webpack 中包含加载器?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图在 index.html 中包含 Header.html 和 footer.html.因为我将使用这两个文件作为所有页面的通用文件.由于我的研究 webpack 不允许将文件导入为

我试过 grunt 我工作正常.但是在webpack中怎么做

这是我的 webpack 版本详情

"name": "webpack-boilerplate",版本":1.0.0"，

这是我尝试过的...在我的 webpack.config.js 文件

<代码>{测试:/.html$/,装载机:'html-装载机'}

在我的 index.html 文件中

require("html-loader!./file.html");<div class="banner"><h3>横幅1</h3>

<div class="bannerbanner2"><h3>横幅2</h3>

但它显示在页面

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

那怎么做呢?

解决方案

html-webpack-plugin 支持使用变量进行模板化.

你可以在你的 webpack.config.js 中定义变量

new HtmlWebpackPlugin({模板:'./src/index.html',header: 'hello world
',脚注:'<b>页脚</b>'}),

然后像这样将它们放在 index.html 中:

<头></头><身体><%= htmlWebpackPlugin.options.header %><!-- 所有标准模板都在这里--><%= htmlWebpackPlugin.options.footer %>

<小时>

从普通 HTML 文件加载页眉和页脚需要一个额外的步骤，我们为此使用内置的 fs 节点包(您不必安装它).

let fs = require('fs');const header = fs.readFileSync(__dirname + '/header.html');const 页脚 = fs.readFileSync(__dirname + '/footer.html');模块.出口 = {//你所有的正常配置插件: [新的 HtmlWebpackPlugin({模板:'./src/index.html',标题:标题，页脚:页脚，})]});

现在，当您运行 webpack 时，您的 HTML 文件将被注入到您指定的位置，其中包含页眉和页脚文件的内容.

I am trying to include Header.html and also footer.html inside index.html. Because I am going to use these two files as common for all the pages. As my research webpack is not allowing to import files as

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

I've tried in grunt i was working fine . But how to do in webpack

this is my webpack version details

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

here is what i tried... in my webpack.config.js file

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

in my index.html file

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

but its showing in page

and this not for react. This is only for website and normal html..

so how to do this?

解决方案

html-webpack-plugin supports templating with variables.

You can define the variables in your webpack.config.js

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

And put them in place in your index.html like so:

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

To load the header and footer from normal HTML files requires an additional step and we use the built in fs node package for this (you don't have to install it).

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,
      })
     ]
});

Now when you run webpack your HTML file will be injected in the positions you specified with the content of your header and footer files.

这篇关于如何在 webpack 中包含加载器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

如何在 webpack 中包含加载器? [英] how to include loaders in webpack?

问题描述

hello world

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

如何在 webpack 中包含加载器? [英] how to include loaders in webpack?

问题描述

hello world

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭