Laravel Mix Twig to Html

A Laravel Mix extension to convert twig files to html.

Usage

Install the extension:

npm install laravel-mix-twig-to-html --save-dev

or

yarn add laravel-mix-twig-to-html --dev

Then require and configure the extension within your webpack.mix.js.

Simple configuration

Create the html pages from a string (or an array) of minimatch supported paths to your twig files.

const mix = require('laravel-mix');
 
require('laravel-mix-twig-to-html');
 
mix.twigToHtml({
    files: 'src/templates/**/*.{twig,html}',
    fileBase: 'src/templates',
});

Advanced configuration

Additional output options allow you to set custom html-webpack-plugin options and twig options.

const mix = require('laravel-mix');
 
require('laravel-mix-twig-to-html');
 
const files = [
    {
        template: 'src/templates/about/**/*.twig',
        title: 'About',
    },
    {
        template: 'src/templates/index.twig',
        title: 'Home',
        inject: false, // disable asset tag injection
    }
]
 
mix.twigToHtml({
    files: files,
    fileBase: 'src/templates',
    twigOptions: { data: {} },
});

Underscore to ignore

Files or folders prefixed with an underscore are ignored from html output. This is a handy feature for ignoring component and layout files.

Ignored files:
/_components/header.twig
/_layouts/base.twig
/_include.twig

Options

Name	Type	Default	Description
files *	string / array	[]	Paths to your twig source files (supports minimatch) OR An array of objects to pass to html-webpack-plugin
fileBase *	string	``	The base path to your template folder
twigOptions	object	{}	The twig-html-loader options, see twig-html-loader for the options
enabled	boolean	true	Turns the extension on or off manually

* = Required

Links

This extension was created for the Agency Webpack Mix Config.