如何使用Webpack预编译Handlebars模板？附配置示例

我来帮你搞定这个问题，结合你给出的配置文件，咱们一步步调整到可用状态：

1. 安装必要依赖 #

首先得把相关的包装全，在项目根目录运行下面的命令：

npm install webpack webpack-cli handlebars precompile-handlebars --save-dev

• webpack和webpack-cli是运行Webpack打包的核心工具
• handlebars是模板引擎本身，预编译后还是需要它来渲染模板
• precompile-handlebars就是你要用的预编译插件

2. 修正webpack.config.js配置 #

你的现有配置有两处需要完善：一是Webpack 4+必须指定mode，二是用绝对路径避免相对路径的坑，调整后的配置如下：

const path = require('path');
const webpack = require('webpack');
const HandlebarsPlugin = require('precompile-handlebars');

module.exports = {
  // 指定模式：development保留源码便于调试，production会压缩代码
  mode: 'development',
  plugins: [
    new HandlebarsPlugin([
      {
        // 用绝对路径指定模板目录，避免不同环境下的路径差异
        inputDir: path.resolve(__dirname, 'src/main/resources/static/templates'),
        // 同样用绝对路径指定输出文件
        outputFile: path.resolve(__dirname, 'src/main/resources/static/js/compiled-templates.js'),
        // 可选：自定义模板命名空间，默认是Handlebars.templates
        // namespace: 'MyApp.templates'
      }
    ])
  ],
};

3. 给package.json添加打包脚本 #

你的package.json里现在只有测试脚本，得加一个触发模板编译的命令：

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build:templates": "webpack --config webpack.config.js"
  },
  "devDependencies": {
    "handlebars": "^4.7.8",
    "precompile-handlebars": "^1.0.0",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4"
  }
}

以后只要运行npm run build:templates，Webpack就会自动把指定目录下的Handlebars模板预编译成JS文件。

4. 使用预编译后的模板 #

编译完成后，在页面里先引入Handlebars和编译后的模板文件：

<script src="path/to/handlebars.min.js"></script>
<script src="src/main/resources/static/js/compiled-templates.js"></script>

然后在JS里调用模板渲染内容：

// 假设你有个叫user.hbs的模板文件
const userData = { name: 'Ace', age: 28 };
const renderedHtml = Handlebars.templates.user(userData);
document.getElementById('user-container').innerHTML = renderedHtml;

可能遇到的小坑 #

• 确保inputDir目录下的模板都是.hbs或.handlebars后缀，插件默认识别这些格式
• 如果编译后找不到模板，检查outputFile的路径是否正确，以及是否有文件写入权限
• Webpack 5环境下不需要额外配置入口和出口，这个插件会独立处理模板的输出流程

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