Liquid 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:
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:
...
<body>
{% if dev_evn %} Section for development {% else %} Section for production
{% endif %}
</body>
...
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:
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;
}
}
}]
}]
},
...
};
Liquid Loader is released under the MIT license.