使用 Webpack 4 的车把加载器

Question

我一直在查看如何将 handlebars-loader 与 webpack 一起使用的示例，但 none 似乎可以与 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'
  }
};

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

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: {}
         }
       })
     ]

Answer 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"

使用 Webpack 4 的车把加载器

Handlebars Loader with Webpack 4

javascript

webpack

webpack-handlebars-loader

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