问题标签 [webpack-handlebars-loader]

我目前正在尝试设置 webpack-dev-middleware（webpack-dev-server 中使用的中间件，但托管在我自己的节点应用程序中）。

我的要求之一是能够通过把手解析我的应用程序“index.hbs”，然后注入通常 html-webpack-plugin 注入的所有内容。（带有内置捆绑包的几个脚本）

我已经找到了使用车把加载器的选项并为其准备了配置（根据this）

这几乎可以工作..“几乎”部分是通常我曾经像这样渲染我的 index.hbs （片段来自 node+express 应用程序）：

这意味着我实际上是根据查询参数解析模板。经过冗长的解释，问题是：

有什么方法可以使用 webpack handlebars-loader 传递“上下文”/参数来实现现在使用 webpack 提供文件的相同行为？

请注意，这只是开发设置。

我有一个使用 webpacker gem 的 rails 5.1 应用程序。我的 package.json 文件如下：

而我的 webpack/environment.js 文件如下：

如果我在 app/javascript/templates 中创建一个 foo.hbs 文件，那么我可以使用以下代码成功编译该模板：

但我遇到困难的部分是如何添加车把助手。我想要一个文件夹 app/javascript/handlebars-helpers 并在其中放置辅助函数，但我不确定如何配置它。handlebars-loader 的文档建议您如何指定助手目录：https ://github.com/pcardune/handlebars-loader/blob/master/examples/helperDirs/webpack.config.js但我不清楚我如何将它添加到 webpacker 的 environment.js 中。

I have been looking at examples of how to use the handlebars-loader with webpack but none seem to be working with webpack 4.

Error

ERROR in ./src/templates/property-list-item.hbs Module build failed: TypeError: Cannot read property 'handlebarsLoader' of undefined at getLoaderConfig (/Users/Sam/Desktop/mettamware/Public/js/node_modules/handlebars-loader/index.js:24:37) at Object.module.exports (/Users/Sam/Desktop/mettamware/Public/js/node_modules/handlebars-loader/index.js:32:15) @ ./src/property-list.js 5:0-58 40:23-31 @ ./src/app.js

When I look in node_modeules/handlerbars-loader/index.js, the offending function is this

My webpack.config.js

If anyone can help I would greatly appreciate it. I've been searching for hours for a solution and have tried lots to things but am not getting anywhere.

我正在使用把手来满足我的模板需求。我显然需要在服务器上渲染一些模板来处理构建标准布局（带有页眉、页脚、导航栏和内容面板等）。但我还需要一些客户端模板，以便我可以使用 ajax 来获取数据，然后在模板中呈现它。

我在 node 中选择了 express-handlebars 模块，因为它会自动编译服务器中的模板和布局。

几篇文章建议我可以配置 webpack 以将我的模板、部分和帮助程序导出到客户端，以便我可以重用它们。

所以我创建了以下 webpack 配置：

我不想要单个分页应用程序，因此我已配置为仅导出与每个页面捆绑在一起的必要 .js 文件。

我负责 express-handlebars 配置的 app.js 片段如下：

我的问题是这些东西都没有导出到客户端/浏览器（部分和助手 - 我已经检查了导出的包，它们肯定不可用）。

最终我放弃了尝试让它工作，而是通过在脚本标签中编写标记来重新创建客户端中的部分，如下所示：

然后我得到这个脚本的引用并按照通常的方法编译模板和注入数据等。

但是...这是不可能的，因为服务器端模板编译会解析这个脚本，就好像它是页面视图的一部分，并且当它在客户端呈现时，我已经丢失了所有的把手符号 {{}}。

理想情况下，我只想能够配置 express-handlebars / webpack 组合以导出每个页面的正确部分和帮助程序，以便我可以使用它们。

很多人一定在这个确切的用例上苦苦挣扎，因为车把非常受欢迎，而且我知道它不应该只用于 SPA 中。

如果有人对我有任何建议，我将不胜感激。

似乎车把加载器没有像我预期的那样处理内联部分。我希望您以与{{> @partial-block}}. 假设我们有 index.hbs

和 wrapper.hbs 部分

我预计

但不幸的是，加载器不处理{{> column1}}内联部分，而是尝试加载文件并且显然失败。有人可以建议吗？可能是我想要的太多了……

我正在为 webpack 4 使用这个把手加载器。现在我想使用自定义助手，但我只收到这个错误

模板执行中的错误失败：TypeError: __default(...).call 不是函数

TypeError 中的错误：__default(...).call 不是函数

这是我的 webpack.config

这是我的简单帮手

以及我如何使用它

有谁知道我做错了什么？

我有一个简单的部分

但我收到此错误消息。

如果我在我的部分中放置一个静态路径

有用。

我必须做的是，我可以在车把文件中使用动态路径？

我正在做一个小项目，我使用 webpack 来生成我的 js 和 css 代码的捆绑包，一切都很好，但是我试图做一个 web 组件来导入我在这里<link rel="stylesheet" href="yourcss1.css">读到的 css 样式，我可以在里面使用一个通用的用于导入样式的模板，但问题是当 webpack 构建捆绑包时可以将 css 文件移动到 dist 文件夹，我如何配置 webpack 以读取嵌套在模板中的 css 文件并移动到 dist 文件夹。

这是我的配置 webpack.config.js ：

魔术表.hbs

MagicTable.js

不确定我是否正确地处理了这个问题，但我正在尝试在 Webpack 中使用带有文件加载器的把手模板。我遇到的问题是我有图像的资产文件夹没有被复制到 dist 文件夹，并且正在使用文件加载器解决 img src 以提取图像。如果有一篇我找不到有用的帖子，请分享，或者如果有一篇包含有用信息的文章，我也会采纳。

提前感谢您的帮助。

Webpack.config

车把模板

包.json

我想Handlebars在我的 CRA 项目中导入一个文件作为模板。

这是我目前的设置，改编自React-App- Rewired won't add Babel Plugin , handlebars-loader , and customize-cra

配置覆盖.js

在第三行我得到TypeError: template is not a function

安慰：

/static/media/test.a9cd7544.handlebars

包.json

我究竟做错了什么？