This project is now just sample code and is not intended for production use. It is not actively maintained.
A swig plugin for webpack to keep markup code DRY by rendering static html files from your swig sources.
Install the plugin with npm or yarn:
$ yarn add swig-plugin --devThe plugin will use your source templates to generate HTML files to your output path. Just add the plugin to your webpack config as follows:
var SwigPlugin = require('swig-plugin')
var webpackConfig = {
entry: 'src/app.js',
output: {
path: path.resolve(__dirname, 'dist/assets'),
filename: '[name].js'
},
plugins: [
new SwigPlugin('src/views/*.html')
]
}This will look in your src/views folder for any swig template files and render them to the output path.
outputPath: a custom output folder relative to webpack's output path.data: Any data you want to pass to your swig templates. It will be available as {{foo}} in your templates.
Here's an example webpack config illustrating how to use these options:
{
...
plugins: [
new SwigPlugin('src/*.html', {
data: {
foo: 'bar'
},
outputPath: '../'
})
]
}To pass unique data to each template, you can register more than one plugin:
{
...
plugins: [
new SwigPlugin('test.html' { data:{ color: '#999', title: 'Test page' } }),
new SwigPlugin('about.html' { data:{ color: '#CCC', title: 'About page' } }),
]
}project/
+-- src/
| +-- views/
| +-- help.html
| +-- about.html
| +-- layouts/
| +-- public.html
| +-- admin.html
| +-- snippets/
| +-- nav.html
| +-- footer.html
+-- dist/
<!-- src/views/layouts/public.html -->
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}layout{% endblock %}</title>
</head>
<body>
{% block content %}{% endblock %}
</body>
</html><!-- src/views/about.html -->
{% extends "layouts/public.html" %}
{% block title %}About us{% endblock %}
{% block content %}
<h2>About</h2>
<p>A variable that was passed in: {{ foo }}</p>
{% include "snippets/footer.html" %}
{% endblock %}