时间戳

首页 > 解决方案 > Webpack HandleblebarsPlugin 不在页眉/页脚中注入包

webpack - Webpack HandleblebarsPlugin 不在页眉/页脚中注入包

问题描述

最近我从 with 切换到了handlebars-loader，从那一刻起，我无法将 bundled注入头部或页脚。这是我的 webpack 配置的一部分。HandlebarsPluginwebpack-dev-serverstyle.min.cssbundle.js

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, '*.hbs'),
                    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) {}
            }),
        }
    }
};

此刻，我在 main 中硬编码了 css 和 js 的路径tpl.hbs。

<!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 缩小不起作用，主要的事情 - 注入不起作用。

有任何想法吗？谢谢

标签： webpackhandlebars.jshtml-webpack-plugin

解决方案

推荐阅读