html webpack插件 - 如何将标题/页脚HTML部分导入身体模板

我试图弄清楚你可以拥有索引文件的方式,当编译时将全局标题和页脚加载到index.html文件中,所以我每次都不要添加它。

此刻即将创建我的index.html文件:

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

it加载身体中的js和头部的css罚款,但我想知道我是否可以做到下面的事情(就像模板引擎一样)

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

所以你建议使用实际的模板引擎来做吗?我认为可能是一种使用webpack以某种方式使用webpack的方法:o

回答 3

  1. 赞同 1

    每是官方的Document.:YOU CAN ACHIEVE

    如果您已有一个模板加载器,则可以使用它来解析模板。请注意,如果您将HTML加载程序和使用.html文件指定为模板,则会发生这种情况。

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

    Ravi Roshan
    So you suggest using an actual template engine to do it? I thought there might of been a way to do this with using webpack somehow :OMax Lynn
    So, it's not out of the way. Webpack just understand JavaScript. So we have different loaders for them and then numerous plugins to achieve the desired output. In your case, just need to install 'handlebars' loader and then configure 'HtmlWebpackPlugin' for that :)ravi Roshan
    I ravi,我跟随了你的回答,我有一个我在这里记录的意外错误。如果您有一会儿,请您建议任何东西吗?stackoverflow.com/questions/41826337/...Max Lynn
  2. 赞同 1

    如果有人需要一个工作示例,请务必。我用了一个EJS-Loader.

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

    Also把EVTH放了。进入一小部分Webpack Batherplate.里面有更多的额外额外的东西;)随意使用它。

    Web设计
  3. 赞同 0

    Since HTML-Loader替换选项与预处理器插值,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. after a half of hours of surfing. Probably it helps to someone.

    Vladimir与