Skip to content
A Laravel Mix extension to convert Twig files to Html
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore add advanced file configuration Aug 15, 2019
LICENSE Initial commit Jul 2, 2019 document new advanced config Aug 15, 2019
index.js add advanced file configuration Aug 15, 2019
package-lock.json 1.2.0 Aug 15, 2019
package.json 1.2.0 Aug 15, 2019


Laravel Mix Twig to Html

A Laravel Mix extension to convert twig files to html.


Install the extension:

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


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');


    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');


const files = [
        template: 'src/templates/about/**/*.twig',
        title: 'About',
        template: 'src/templates/index.twig',
        title: 'Home',
        inject: false, // disable asset tag injection

    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:


Name Type Default Description
files * string / array [] Paths to your twig source files (supports minimatch)
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


This extension was created for the Agency Webpack Mix Config.

You can’t perform that action at this time.