Handpackars装载机与Webpack 4

时间:2018-03-01 18:43:25

标签: javascript webpack webpack-handlebars-loader

我一直在研究如何使用带有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'
  }
};

如果有人可以提供帮助,我将非常感激。我一直在寻找解决方案的几个小时,并尝试了很多事情,但没有到达任何地方。

2 个答案:

答案 0 :(得分:2)

同样正在升级旧的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: {}
         }
       })
     ]

答案 1 :(得分:1)

在Webpack 4 loaderContext.options已替换为loaderContext.rootConfig

已经对handlebars-loader包进行了{p> This commit以使其与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"