javascript - 使用 Webpack 4 的 Handlebars 加载器

Question

我一直在查看如何将 handlebars-loader 与 webpack 一起使用的示例，但似乎没有一个适用于 webpack 4。

错误

./src/templates/property-list-item.hbs 中的错误
模块构建失败:TypeError:无法读取未定义的属性“handlebarsLoader”
在 getLoaderConfig (/Users/Sam/Desktop/mettamware/Public/js/node_modules/handlebars-loader/index.js:24:37)
在 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'
  }
};

如果有人能提供帮助，我将不胜感激。我花了好几个小时寻找解决方案，并尝试了很多事情，但一无所获。

Answer 1

还在升级旧的 webpack 4...

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

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

For loader options: webpack 2 no longer allows custom properties in configuration.

Loaders should be updated to allow passing options via loader options in module.rules.

Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:

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

在我的例子中，现在这样设置:

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