Html Webpack Plugin - 如何将页眉/页脚 html 部分导入正文模板答案

【问题标题】：Html Webpack Plugin - How do you import headers/footer html partials into body templateHtml Webpack Plugin - 如何将页眉/页脚 html 部分导入正文模板
【发布时间】：2017-06-05 10:47:56
【问题描述】：

我正在尝试找出一种方法，您可以在其中创建一个索引文件，该文件在编译时会将全局页眉和页脚加载到 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>

让我知道你的想法

【问题讨论】：

标签： javascript html webpack

【解决方案1】：

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

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

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

【讨论】：

所以你建议使用一个实际的模板引擎来做到这一点？我认为可能有一种方法可以通过某种方式使用 webpack 来做到这一点：O
所以，它并没有碍事。 Webpack 只了解 JavaScript。因此，我们为它们提供了不同的加载器，然后使用了许多插件来实现所需的输出。在你的情况下，只需要安装'handlebars'加载器，然后为此配置'HtmlWebpackPlugin' :)
您好 Ravi，我已按照您的回答进行操作，但在此处记录了一个意外错误。如果你有时间，你能建议什么吗？ stackoverflow.com/questions/41826337/…

【解决方案2】：

以防万一有人需要一个工作示例。我用ejs-loader 做到了

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

也放上evth。到一个小的webpack boilerplate 里面还有一些额外的东西;) 随意使用它。

【讨论】：

【解决方案3】：

由于 html-loader 用预处理器替换了 option interpolate，所以 webpack5 和 html-loader 3.0.1 的解决方案是：

preprocessor: (content, loaderContext) =>
      content.replace(
        /<include src="(.+)"\s*\/?>(?:<\/include>)?/gi,
        (m, src) => {
          const filePath = path.resolve(loaderContext.context, src)
          loaderContext.dependency(filePath)
          return fs.readFileSync(filePath, 'utf8')
        }
      ),

经过半小时的冲浪后，我从github 得到了解决方案。可能对某人有帮助。

【讨论】：