Html Webpack 插件 - 如何将页眉/页脚 html 部分导入正文模板

Max*_*ynn 5 html javascript webpack

我试图找出一种方法,您可以在其中拥有一个索引文件,该文件在编译时将全局页眉和页脚加载到 index.html 文件中,因此我不必每次都添加它。

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

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

它在正文中加载 JS,在头部加载 css,但我想知道我是否可以执行以下操作(就像模板引擎一样)

  <body>
       {{HEADER GETS IMPORTED HERE}}
       <p>Success your page has loaded</p>
       <button class="button">Button</button>
       {{FOOTER GETS IMPORTED HERE}}
  </body>
Run Code Online (Sandbox Code Playgroud)

让我知道你的想法

Rav*_*han 1

根据官方文件你可以实现它。

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

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