0

早些时候我一直在使用 gulp-nunjucks 进行模板 - content 扩展布局并包含 partials。所以我试着用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
}

在_layout.html我成功地要求部分页面使用所需的 html 文件呈现。

//...
<body>
    <%= require('html-loader!./partials/header.html') %>
    <%= require('html-loader!./pages/' + htmlWebpackPlugin.options.page + '.html') %>
</body>

但是，如果我试图在_layout.html -处要求部分内部已经需要的部分，则相同的方法不起作用require('html-loader!./pages/' + htmlWebpackPlugin.options.page + '.html')。

/pages/home.html

<%= require('html-loader!./partials/test-partial.html') %>

有没有办法html-wepback-plugin在另一个部分中要求部分？我应该应用某种加载器来启用它吗？

4

0 回答 0