Hello, I am trying to use theese layouts with webpack, and have webpack build a hb

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Wow <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url=

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Need help using this with webpack about handlebars-layouts HOT 4 CLOSED

shannonmoeller commented on June 1, 2024

Need help using this with webpack

from handlebars-layouts.

Comments (4)

webdiscus commented on June 1, 2024 1

@Paillat-dev

if you want to use an extendable layout, so each page uses the same layout file, then you can try actual html-bundler-webpack-plugin. This plugin allow very easy to configure the webpack to render handlebars (and many other template engines).

Here is the webpack-starter-with-handlebars with the example exactly for your use case.

For example, there is the layout.hbs:

<!DOCTYPE html>
<html>
<head>
  {{! relative path to source scripts and styles files will be auto resolved and compiled }}
  <link href="./style.scss" rel="stylesheet">
  <script src="./main.js" defer="defer"></script>
</head>
<body>
  {{! if the block is not defined in a parent template, then output default content }}
  {{#block 'page_content'}}<p class="custom">default block content</p>{{/block}}
</body>
</html>

The page file index.hbs:

{{! define the block page_content which will be output in layout }}
{{#partial 'page_content'}}
  <h1>Hello World!</h1>
{{/partial}}

{{! extends the layout template with blocks defined above }}
{{> layout}}

The webpack config is very easy:

new HtmlBundlerPlugin({
  // automatically processing all pages from the directory
  entry: Path.join(__dirname, 'src/views/pages/'),
  // - OR - define each page manually
  entry: {
    'de': 'src/views/pages/de.hbs', // => dist/de.html
    'en': 'src/views/pages/en.hbs', // => dist/en.html
    // etc.
  },
  preprocessor: 'handlebars',
  preprocessorOptions: {
    partials: [
     'src/views/partials/',
     ],
  },
  js: {
    filename: 'js/[name].[contenthash:8].js',
  },
  css: {
    filename: 'css/[name].[contenthash:8].css',
  },
}),

P.S. you can create a small repo with your use case and I can help you to configure it.

from handlebars-layouts.

Paillat-dev commented on June 1, 2024 1

Wow @webdiscus thanks very much for the details, It very much helps. I'll try to see what I can do, and let you know &/ close this issue. Thanks much for the help, you definitely gained a star!

from handlebars-layouts.

webdiscus commented on June 1, 2024

@Paillat-dev if you have any questions create a discussion or an issue.

from handlebars-layouts.

Paillat-dev commented on June 1, 2024

If anyone happens to come here and read this, just use the solution above :)

from handlebars-layouts.

Recommend Projects