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

标签 javascript html webpack

我是 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。有人可以帮我吗? 非常感谢!

最佳答案

Webpack 并不适合执行此类任务。

您想要的可能是一个模板引擎,例如 Handlebars.js ,使用适当的加载程序,handlebars-loader 。 然后您可以配置加载程序以按照您想要的方式处理模板文件。

关于javascript - 使用 webpack 替换 HTML 模板中的按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38158199/

相关文章:

javascript - 在mootools或javascript中动态创建对象

javascript - 从 javascript 内部设置函数时获取 onmouseover 'event' 对象

html - 将禁用输入字段的值设置为 ngModel

javascript - 使用 webpack 和 laravel .env 作为标志

javascript - 有没有办法等待加载网站的 dom(不是完整的网页)?

javascript - 创建用于选择图像的代码的建议

javascript - jQuery Div OnClick 触发兄弟链接

javascript - 使用jquery滚动页面无法正常工作

node.js - nodemon 在 package.json 中执行 "prestart"脚本

javascript - Webpack 可以在不需要它们的情况下处理目录中的所有图像吗?