Earlier I've been using gulp-nunjucks for templating - content extends layout and includes partials. So I've tried to sorta replicate this with html-webpack-plugin
webpack.config.js
const pages = ['home', 'page1'];
const pagesToHTMLPlugin = function(arr) {
return arr.map(function(page) {
return new HtmlWebpackPlugin({
page: page,
template: path.resolve(__dirname, 'src/_layout.html'),
filename: page + '.html',
inject: 'body'
});
});
};
let plugins = pagesToHTMLPlugin(pages).concat(new MiniCssExtractPlugin({ filename: 'main.css' }));
module.exports = {
//...
plugins: plugins
}
at _layout.html i'm successfully requiring partials pages gets rendered with required html files.
//...
<body>
<%= require('html-loader!./partials/header.html') %>
<%= require('html-loader!./pages/' + htmlWebpackPlugin.options.page + '.html') %>
</body>
yet same approach doesn't work if I'm trying to require partial inside already required partial at _layout.html - require('html-loader!./pages/' + htmlWebpackPlugin.options.page + '.html')
.
/pages/home.html
<%= require('html-loader!./partials/test-partial.html') %>
Is there any way require html-wepback-plugin
partial within another partial? Should I apply some kind of a loader to enable it?