带有 Webpack 4 的把手加载器答案

【问题标题】：Handlebars Loader with Webpack 4带有 Webpack 4 的把手加载器
【发布时间】：2018-03-01 18:43:24
【问题描述】：

我一直在查看如何将把手加载器与 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);
}

我的 webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.hbs$/,
        use: [{
          loader: "handlebars-loader",
          options: {
            helperDirs: path.resolve(__dirname, "./src/helpers")
          }
        }]
      }
    ]
  },
  node: {
    fs: 'empty'
  }
};

如果有人可以提供帮助，我将不胜感激。我一直在寻找解决方案几个小时，并且尝试了很多事情，但没有得到任何结果。

【问题讨论】：

我曾经认为 webpack 4 引人注目的新特性是它是零配置？
如果我的回答解决了您的问题，您是否可以选中复选标记将其标记为问题的答案？谢谢。
@Clay 谢谢你的帮助！实际上，在我看到您的答案之前，我已经找到了解决方案，但只有时间发布我自己的答案。希望我们的两个答案都对其他人有所帮助:)

标签： javascript webpack webpack-handlebars-loader

【解决方案1】：

还在升级旧的 webpack 4...

显然，过去可以在配置上设置自定义属性。它在那里寻找handlebarsLoader。

当您在其上设置 handleBarLoader 属性时，它会发出此错误。

对于加载器选项：webpack 2 不再允许在配置中自定义属性。

应更新加载器以允许通过 module.rules 中的加载器选项传递选项。

在加载器更新之前，可以使用 LoaderOptionsPlugin 将这些选项传递给加载器：

     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           handlebarsLoader: ...
         }
       })
     ]

就我而言，暂时这样设置：

     plugins: [
       new webpack.LoaderOptionsPlugin({
         options: {
           handlebarsLoader: {}
         }
       })
     ]

【讨论】：

【解决方案2】：

在 Webpack 4 中，loaderContext.options 已替换为 loaderContext.rootConfig。

This commit 已被添加到 handlebars-loader 包中以使其与 Webpack 4 兼容，但尚未发布。

目前我已经卸载了handlebars-loader，正在使用this fork。

以下步骤解决了我的问题：

运行这两个命令。
npm uninstall handlebars-loader
npm install @icetee/handlebars-loader

在webpack.config.js，替换

loader: "handlebars-loader"

与

loader: "@icetee/handlebars-loader"

【讨论】：