0

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?

m aksem
  • 553
  • 1
  • 5
  • 13
  • Did you end up figuring this out? I have the same issue. cheers – roshambo Jun 28 '19 at 06:10
  • nah. i ended up using webpack for js bundling, and gulp for everything else - server, watching changes, html templating, style preprocessing. – m aksem Jun 29 '19 at 15:32
  • 1
    Hi there I figured this out `{ test: /\.html$/, include: path.join(__dirname, 'src/components'), use: [ { loader: 'html-loader', options: { interpolate: true }, } ] }` and then in your partials within partials `${require('../../components/button/_button.html')}` – roshambo Jun 30 '19 at 23:07

0 Answers0