Webpack HandleblebarsPlugin不会在页眉/页脚中注入捆绑

如何解决Webpack HandleblebarsPlugin不会在页眉/页脚中注入捆绑

最近我用handlebars-loader从HandlebarsPlugin切换到webpack-dev-server，从那一刻起，我无法将捆绑的style.min.css注入头部或将bundle.js注入页脚。这是我的webpack配置的一部分。

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HandlebarsPlugin = require('handlebars-webpack-plugin');

module.exports = (env,argv) => {
    const theme = (argv.theme === undefined) ? 'default' : argv.theme;
    const themeAssets = path.join('assets',theme);

    return {
        plugins: {
            new HtmlWebpackPlugin({
                title: 'Hello Webpack',template: path.join(dirLayout,'tpl.hbs'),inject: 'head',minify: true,// only for testing purpose and IT DOES NOTHING
            }),new HandlebarsPlugin({
                HtmlWebpackPlugin: {
                    enabled: true,// register all partials from html-webpack-plugin,defaults to `false`
                    prefix: "html" // (???) where to look for htmlWebpackPlugin output. default is "html"
                },entry: path.join(dirPages,'**','*.hbs'),output: path.join(dirDist,'[path]','index.html'),// is rewritten in getTargetFilepath
                data: path.join(dirSrc,'data.json'),partials: [
                    path.join(dirLayout,path.resolve(dirPartials,'*','*.hbs')
                ],getTargetFilepath: function getTargetFilepath(filepath,outputTemplate,rootFolder) {
                    const sanitizePath = require('handlebars-webpack-plugin/utils/sanitizePath');
                    filePath = sanitizePath(filepath);
                    rootPath = rootFolder ? sanitizePath(rootFolder) : path.dirname(filePath);
                    
                    if (outputTemplate == null) {
                        return filePath.replace(path.extname(filePath),"");
                    }
                    
                    const folderPath = path
                    .dirname(filePath)
                    .split(rootPath)[1];
                    
                    const fileName = path
                    .basename(filePath)
                    .replace(path.extname(filePath),"");
                    
                    const page = fileName !== 'index' ? '/'+fileName.replace(" ","-") : '';
                    return outputTemplate
                        .replace("[path]",folderPath+page)
                        .replace("[name]",'index');
                },helpers: {
                    projectHelpers: path.join(dirHelpers,"*.js")
                },onBeforeSetup: (Handlebars) => {
                    return registerHandlersHelpers(Handlebars);
                },onBeforeRender: (Handlebars,data) => {
                    return makeDataReplacements(data);
                },// == uncomment if style and js are hardcoded as /path/[[THEME]]/to/file.ext ==
                // onBeforeSave: function (Handlebars,resultHtml,filename) {
                //     return resultHtml.replace(new RegExp(/\[\[THEME\]\]/,'g'),theme);
                // },onDone: function (Handlebars,filename) {}
            }),}
    }
};

此刻，我已经在主tpl.hbs中对css和js进行了硬编码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>{{htmlWebpackPlugin.options.title}}</title>
    <link rel="stylesheet" href="/assets/default/css/style.min.css">
</head>
<body>
    {{ htmlWebpackPlugin.options.title }}<!-- THIS RETURNS EMPTY STRING -->
    {{#if (content 'header')}}
    <header>
        {{#block 'header'}}{{/block}}
    </header>
    {{/if}}

    <main>
        {{#block 'body'}}{{/block}}
    </main>

    {{#if (content 'footer')}}
    <footer>
        {{#block 'footer'}}{{/block}}
    </footer>
    {{/if}}

    <script src="/assets/default/js/bundle.js"></script>
</body>
</html>

注意{{ htmlWebpackPlugin.options.title }}-这不会输出任何内容。现在奇怪的是-如果我从配置中完全删除了HtmlWebpackPlugin，该模板仍然可以正常工作而没有任何错误。。在我看来，HtmlWebpackPlugin被HandlebarsPlugin忽略了，我可以找不到为什么。没有生成标题，html缩小不起作用，最主要的是-注入不起作用。

有什么想法吗？谢谢

Webpack HandleblebarsPlugin不会在页眉/页脚中注入捆绑

如何解决Webpack HandleblebarsPlugin不会在页眉/页脚中注入捆绑

相关推荐