logo标签列表

Html Webpack插件 - 如何将头部/底部HTML部分导入到正文模板中？

javascripthtmlwebpack
6
我希望您能够编写一个索引文件，当编译时将全局页眉和页脚加载到index.html文件中，以便我不必每次都添加它们。
目前，这是创建我的index.html文件的方式：
    new HtmlWebpackPlugin({
        title: 'Typescript Webpack Starter',
        template: '!!ejs-loader!src/index.html'
    }),

它可以正常在body中加载JS，在head中加载css，但我想知道是否可以像下面这样做（就像模板引擎一样）：
  <body>
       {{HEADER GETS IMPORTED HERE}}
       <p>Success your page has loaded</p>
       <button class="button">Button</button>
       {{FOOTER GETS IMPORTED HERE}}
  </body>

请告诉我你的想法

3个回答
1

万一有人需要一个可行的示例。我使用ejs-loader实现了它。

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

同时将所有内容放入一个小的webpack脚手架中，里面还有一些额外的东西;)随意使用。

1
根据官方 文档 : 你可以实现它。
如果您已经有一个模板加载器，您可以使用它来解析模板。请注意，如果您指定了html-loader并使用.html文件作为模板，这也将发生。
 module: {
   loaders: [
     { test: /\.hbs$/, loader: "handlebars" }
   ]
 },
 plugins: [
   new HtmlWebpackPlugin({
     title: 'Custom template using Handlebars',
     template: 'my-index.hbs'
   })
 ]
那么您建议使用实际的模板引擎来完成吗？我以为可能有一种方法可以通过某种方式使用webpack来完成这个任务 :O - Max Lynn
所以，这并不是什么难事。 Webpack只能理解JavaScript。因此，我们需要为它们提供不同的加载器，然后使用众多插件来实现所需的输出。在您的情况下，只需要安装“handlebars”加载器，然后为其配置“HtmlWebpackPlugin”即可 :) - Ravi Roshan
嗨 Ravi，我按照你的回答去操作了，但是我遇到了一个意外错误，我在这里记录了。如果您有时间，能否请您提出任何建议？http://stackoverflow.com/questions/41826337/webpack-2-handlbar-loader-module-parse-failed-error - Max Lynn
0
自从html-loader将选项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得到了一个解决方案。可能对某些人有所帮助。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接