如何使用 webpack 预编译车把模板？答案

【问题标题】：How to precompile handlebars templates using webpack?如何使用 webpack 预编译车把模板？
【发布时间】：2018-05-02 16:19:02
【问题描述】：

我有以下 webpack.config.js 文件：

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

module.exports = {

      plugins: [
        new HandlebarsPlugin([
            {
                inputDir: "src/main/resources/static/templates",
                outputFile: "src/main/resources/static/js/compiled-templates.js"
            }
        ])
    ],
}

package.json 文件：

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
     "build": "webpack --mode production"
  },

  "author": "",
  "license": "ISC",


  "devDependencies": {
    "precompile-handlebars": "^1.0.5",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.1.2"
  }
}

当我执行 npm run dev 或 npm run build 时，它不会生成预编译的车把模板。我只是使用 webpack 来预编译把手模板，仅此而已。如何解决这个问题？

【问题讨论】：

你试过handlebars-loader和precompileOptions吗？

标签： webpack handlebars.js

【解决方案1】：

我们可以用 hacky 的方式做到这一点！ Webpack 可以像往常一样从模板生成静态 html，但是对于 html 中的动态部分（如异步 DB 数据、异步过滤器等），我们可以为这些部分替换语法标签，然后在服务器上处理捆绑的 html 文件将数据和异步过滤器传递给它。

示例：

对于我的模板引擎“TWIG”，我将默认的 {%...%} 标签替换为 <%...%> 等。并通过 webpack 处理带有默认标签的模板。

<html>
  <body>
    <p>This is static webpack part with default tag: {% include "./test.twig"%}</p>
    <p>This is dynamic part with custom tag: <% book|getDetails %></p>
  </body>
</html>

以及webpack生成后的bundle文件：

<html>
  <body>
    <p>This is static webpack part with default tag: "THIS IS STATIC PART"</p>
    <p>This is dynamic part with custom tag: <% book|getDetails %></p>
  </body>
</html>

现在我可以在我的服务器端渲染/预渲染这个文件，将默认语法标签设置为<%...%>。

<html>
  <body>
    <p>This is static webpack part with default tag: "THIS IS STATIC PART"</p>
    <p>This is dynamic part with custom tag: "THIS IS DYNAMIC BOOK NAME"</p>
  </body>
</html>

【讨论】：

【解决方案2】：

我认为使用 webpack 来编译车把模板是一种矫枉过正的做法。您可以简单地使用 NodeJS 命令行编译它们。

启动 NodeJS 命令提示并执行此操作

npm -g install handlebars

然后运行以下 handlebars 命令，它将获取模板文件夹中的所有模板并将它们合并到一个名为 templates.js 的文件中。

handlebars js/templates/ -f js/templates/templates.js

更多详情here.

希望这会有所帮助....

【讨论】：