Question

我正在试图找出一种方法，你可以在其中创建一个索引文件，在编译时将全局页眉和页脚加载到index.html文件中，这样我就不必每次都添加它。

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

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

它将JS加载到正文中，css加载到头部，但是我想知道我是否可以执行类似下面的操作（就像模板引擎一样）

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

让我知道你的想法

Answer 1

根据官方document：您可以实现。

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

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

Answer 2

以防任何人需要一个有效的例子。我用ejs-loader

做了

<div id="page-wrapper">
   <%- include partials/header.ejs %>
   <div class="content"></div>
   <%- include partials/footer.ejs %>
</div>

也把evth。进入一个小的webpack boilerplate里面还有一些额外的东西;）随意使用它。

Html Webpack插件 - 如何将页眉/页脚html部分导入到主体模板中

2 个答案: