Webpack 4搭配Handlebars Loader使用报错求助

我之前在Webpack 4环境下用handlebars-loader也踩过这个坑，这个报错本质是loader读取配置时找不到对应的项，大概率是loader版本和Webpack 4不兼容或者配置写法不符合Webpack 4的规范，下面给你一步步解决的方案：

1. 安装适配Webpack 4的handlebars-loader版本 #

高版本的handlebars-loader已经只支持Webpack 5+了，所以你需要回退到兼容Webpack 4的版本，执行下面的命令：

npm install handlebars-loader@1.7.1 --save-dev

同时确保核心的handlebars库已经安装：

npm install handlebars --save

2. 修正Webpack配置文件的写法 #

Webpack 4中，loader的配置需要通过module.rules里的options字段传递，不要把handlebarsLoader单独放在配置文件的外层（这是旧版本的写法）。正确的配置示例：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.hbs$/,
        loader: 'handlebars-loader',
        options: {
          // 这里可以添加你的handlebars配置，比如模板片段的路径
          partialDirs: [path.join(__dirname, 'src/templates/partials')]
        }
      }
    ]
  }
};

3. 排查其他可能的冲突 #

• 检查你的Webpack配置里有没有其他和handlebars相关的插件或loader，确保它们的版本也适配Webpack 4；
• 清理node_modules和lock文件，重新安装依赖，避免版本冲突：

rm -rf node_modules package-lock.json
npm install

这个报错的根源是：新版handlebars-loader使用了Webpack 5的loader API来获取配置，而Webpack 4不支持这个API，所以回退到适配的loader版本+修正配置写法就能解决问题啦。

内容的提问来源于stack exchange，提问作者Redtama