handlebars-mix plugin for Laravel-mix
npm install --save handlebars-mixor
yarn add handlebars-mixin your webpack.mix.js
const mix = require('mix');
require('handlebars-mix');
mix.handlebars('**/*.hbs', '/public/pages/*.html');- Input: multiple files:
**/*.hbsor single file:/src/pages/index.hbs - output: multiple files:
/public/*.htmlor single file:/public/index.html
The plugin has the following config defaults. These are required for handlebars to map all dependencies for compiling handlebars templates.
module.exports = {
data: 'src/markup/data',
decorators: 'src/markup/decorators',
helpers: 'src/markup/helpers',
layouts: 'src/markup/layouts',
partials: 'src/markup/partials',
};If you would like to enforce your own folder structure simply create handlebars.config.js or hbs.config.js in your project root.
module.exports = {
data: 'views/json',
helpers: 'views/tools',
layouts: 'views/templates',
partials: 'views/partials',
};The plugin has built in support for frontmatter yaml. Processed yaml data will be passed into the templates before compilation. frontmatter yaml data will preferably be at the top of the template file such as the following exampl
---
title: This is a heading
desc: this is a paragraph
names:
- bob
- jane
- mark
---
{{!< mainlayout}}
<h1>{{title}}</h1>
<p>{{desc}}</p>
<ul>
{{#each names}}
<li>{{this}}</li>
{{/each}}
</ul><html>
<body>
<h1>This is a heading</h1>
<p>this is a paragraph</p>
<ul>
<li>bob</li>
<li>jane</li>
<li>mark</li>
</ul>
</body>
</html>The plugin has built in support for handlebars-layouts. The advanced example shows how to take advantage of handlebars layouts. Please refer to their documentation for more information.
The plugin is also including all helpers found in the npm package handlebars-helpers. Please refer to their documentation for example usages.
| you can not use multiple files and compile their to single file
const mix = require('laravel-mix');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
mix.webpackConfig(() => {
return {
plugins: [
new BrowserSyncPlugin({
host: 'localhost',
port: 3003,
watch: true,
server: { baseDir: ['dist'] }
})
]
};
});