js inject html
miskying opened this issue · 10 comments
作者你好 我有个需求是这样的：
在我的项目中有一个地方需要用iframe嵌入一个网页demon.html，这个网页在我项目里面，然后里面有引入一些js源文件。 我通过vite多入口把文件打包好，可是html文件中引入的js的路径没有变，比如源文件是这样引入的 <script src=./fn.js> 打完包fn.js已经加密到dist/js目录下，文件名也变成demon-hash.js了但打包后的demon.html引入的位置还是<script src=./fn.js>
在webpack中我可以通过html-webpack-plugin
filename: "demon.html",
template: "demon.html",
inject: true,
chunks: ["fn"]
这样把js注入到html里面
请问vite+vite-plugin-html-template需要怎么配置？
ps:我的主项目的index.html文件是放在根目录下的 demon.html放在了src/pages里面
不太清楚，不负责无关问题的答疑。插件都有 examples 可以参考，自己学习下吧。
不太清楚，不负责无关问题的答疑。插件都有 examples 可以参考，自己学习下吧。
HTML template for vite app, like html-webpack-plugin for webpack. 你不是这样说的吗 意思不是这个插件也应该有这种功能？
inject:制定 webpack 打包的 js css 静态资源插入到 html 的位置， 为 true 或者 body 时， 将会把 js 文件放到 body 的底部， 为 head 时， 将 js 脚本放到 head 元素中。
类似于这种 请问该插件有相关参数吗
都使用 html 模板了，1 个用处是预先在 html 里写一些固定的脚本或资源，2. 其他就只能引入 main.js 作为打包入口，vite 构建后会生成带 hash 的一些文件，重新注入回去。
咋 vite 项目还有 webpack。貌似你需要 vite-plugin-html
咋 vite 项目还有 webpack。貌似你需要 vite-plugin-html
这是从一个v2项目中迁移的 v2中用webpack是这么写的 到v3的vite不知道怎么弄了
感谢解答 我再研究下 在另外个插件中提的issue是弄错了 不小心按到快捷键提交了 非常抱歉
暂时通过打包前文件路径和打包后文件路径保持一致解决了 需要引入的js文件配置入口在output配置了不带hash
vite 和 html-webpack-plugin 都是自动注入 hash 后的文件，但是仅仅是纳入模块化管理的
例如 vite 里写在 html 里的 script type=module main.js，构建后会替换 main.js 为 vendors.js + main.js + xxx.js，看你打包策略。
或 html-webpack-plugin 的 webpack 写在 entry 里的，也是一样，看打包策略注入一个或多个 hash js 到 html 里。
实在听不明白你的诉求，祝好运。