Question

我在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来预编译把手模板，而不是别的。如何解决这个问题？

Answer 1

我们可以以骇人的方式做到这一点！ 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生成捆绑文件之后：

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

Answer 2

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

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

npm -g install handlebars

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

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

更多详情here。

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

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

2 个答案:

示例：