how to include loaders in webpack?

2019-05-31 22:59发布

站内问答 / 移动开发
685 1 4

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 enter image description here

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

so how to do this?

1条回答
爱情/是我丢掉的垃圾
2楼-- · 2019-05-31 23:34

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)