我正在使用带有 webpack 和 handlebars-loader(用于 webpack 的把手模板加载器)的handlebars 来实现一个多页 web 应用程序。下面是我的视图文件夹的结构(.hbs 文件)
成分
布局
索引.hbs
product-1.hbs
product-2.hbs
...
我的问题是我在车把中看到了“部分阻止”的奇怪行为。我有两个布局来包装每个页面的主要内容。但我的布局没有在右行加载“部分块”。我在布局中使用部分块的任何地方,把手都会在该位置关闭正文和 html 标记,并在 html 关闭标记之后呈现部分块内容。
下面是我在 body 内加载部分块的示例默认布局:
<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{meta.title}}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="theme-light">
{{#if @partial-block}}
{{> @partial-block }}
{{/if}}
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
我的 index.hbs 文件使用默认布局
{{> layouts/default }}
<main id="index" class="index">
<p>This is index content</p>
</main>
{{layouts/default}}
Run Code Online (Sandbox Code Playgroud)
并呈现 html 文件
<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="utf-8">
<meta …Run Code Online (Sandbox Code Playgroud) 我一直在研究如何使用带有webpack的把手装载器的示例,但似乎没有使用webpack 4.
错误
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
当我查看时node_modeules/handlerbars-loader/index.js,违规功能就是这个
function getLoaderConfig(loaderContext) {
var query = loaderUtils.getOptions(loaderContext) || {};
var configKey = query.config || 'handlebarsLoader';
var config = loaderContext.options[configKey] || {};
delete query.config;
return assign({}, config, query);
}
Run Code Online (Sandbox Code Playgroud)
我的webpack.config.js
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: …Run Code Online (Sandbox Code Playgroud)