Liquid template engine for Webpack loader.
npm install liquid-loaderLiquid template engine for Webpack loader.
Liquid Templating language (see http://github.com/shopify/liquid)
``
npm install --save-dev liquid-loader
| Option | Default | Description |
| ------ | ------- | ------------------------------------------------- |
| data | {} | Object of function that returns the template data |
You can opt between two ways to provide your template data.
You can provide your template data to the loader itself using the data option.
On your webpack.config.js:
`js
const NODE_ENV = process.env.NODE_ENV || 'development';
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
...
module: {
rules: [{
test: /\.liquid$/,
use: [{
loader: "html-loader"
}, {
loader: "liquid-loader",
options: {
data: {
dev_evn: NODE_ENV == 'development'
}
}
}]
}]
},
plugins: [
new HtmlWebpackPlugin({
template: __dirname + '/src/index.liquid',
filename: 'index.html'
})
]
};
`
On your src/index.liquid:
`liquid`
...
{% if dev_evn %} Section for development {% else %} Section for production
{% endif %}
...
Another way is to pass a function in the data option.
This function must return an object containing the data for the template. This way, you you can provide different data to each template.
Function arguments
| Argument | Type | Properties | Description |
| -------- | ------ | ------------ | ----------------------------------------------------- |
| resource | object | resourcePath | String containing the current processed template path |
On your webpack.config.js:
`js``
module.exports = {
...
module: {
rules: [{
test: /\.liquid$/,
use: [{
loader: "html-loader"
}, {
loader: "liquid-loader",
options: {
data: (resourcePath) => {
const myTemplateData = / Get my template data based on the resourcePath (see examples below) /
return myTemplateData;
}
}
}]
}]
},
...
};
- Single template (data object)
- Multiple templaes (data function)
- https://github.com/webpack-contrib/html-loader
- https://github.com/sirlantis/liquid-node
Liquid Loader is released under the MIT license.