Html Webpack插件 - 如何导入页眉/页脚HTML部分到正文模板中

问题描述：

我试图找出一种方法，你可以有一个索引文件，当编译时将全局页眉和页脚加载到index.html文件中，所以我不必每次都添加它。

I'm trying to figure out a way where you can have an index file that when compiled loads the global header and footer into the index.html file so I don't have to add this every time.

目前，这是创建我的index.html文件的原因：

At the moment this is what creates my index.html file:

    new HtmlWebpackPlugin({
        title: 'Typescript Webpack Starter',
        template: '!!ejs-loader!src/index.html'
    }),

它将JS加载到主体中，并将CSS放在头部中，但是我想知道是否可以执行下面的操作（就像模板引擎一样）

It loads the JS in the body and the css in the head fine but I'm wondering if I can do something like the below (just like a template engine would)

  <body>
       {{HEADER GETS IMPORTED HERE}}
       <p>Success your page has loaded</p>
       <button class="button">Button</button>
       {{FOOTER GETS IMPORTED HERE}}
  </body>

让我知道您的想法

Let me know your thoughts

答

根据官方文档：您可以实现。

如果您已经有模板加载器，则可以使用它来分析模板。请注意，如果您指定了html-loader并使用.html文件作为模板，也会发生这种情况。

If you already have a template loader, you can use it to parse the template. Please note that this will also happen if you specifiy the html-loader and use .html file as template.

 module: {
   loaders: [
     { test: /\.hbs$/, loader: "handlebars" }
   ]
 },
 plugins: [
   new HtmlWebpackPlugin({
     title: 'Custom template using Handlebars',
     template: 'my-index.hbs'
   })
 ]

Html Webpack插件 - 如何导入页眉/页脚HTML部分到正文模板中

相关推荐