使用 webpack 替换 HTML 模板中的按钮

【问题标题】：Using webpack to replace a button in a HTML template使用 webpack 替换 HTML 模板中的按钮
【发布时间】：2016-07-02 08:38:47
【问题描述】：

我是 webpack 的新手，遇到了问题。

我的项目目录如下：

--webpack/
    --components/
       --button/
          -button.css
          -button.js
          -button.html
    --entry.js
    --entry.html
    --dist/
       --js/
       --css/
       index.html

我想把button/编译成entry.html，然后entry.html通过字符串替换生成index.html。输出目录是dist/。

entry.html 像这样：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    {{button}}
</body> 
</html>

如您所见，我想使用 webpack 将 {{button}} 替换为 button.html；我不知道如何编写 webpack.config.js。有人可以帮帮我吗？非常感谢！

【问题讨论】：

标签： javascript html webpack

【解决方案1】：

Webpack 不适合做那种任务。

你想要的可能是一个模板引擎，比如Handlebars.js，带有一个合适的加载器，handlebars-loader。然后你可以配置你的加载器以你想要的方式处理模板文件。

【讨论】：

感谢您的帮助！我只是想研究如何使用组件来编写 Web 应用程序。所以，我不想使用像反应这样的框架。然后我想，我可以使用模板来链接组件。是这样吗？
模板引擎所做的是将模板编译为纯html。这意味着如果您要生成静态内容，那么像jade、handlebars、ejs 或其他任何模板引擎绝对是最佳选择。另一方面，如果您的网站需要动态性，那么像 react、angular、backbone 或类似的框架可能是更好的选择。简而言之：您可以，但取决于您正在构建的内容