使用webpack-dev-server提供项目目录外的HTML页面

rnmwe5a2 于 2023-02-08 发布在 Webpack

关注(0)|答案(1)|浏览(174)

有没有一种方法可以使用webpack-dev-server（Webpack 5）来提供HTML文件（不绑定任何JavaScript）？
具体来说，我需要以下两样东西：
1.提供HTML文件，并在更改时实时重新加载。
1.能够提供位于我的项目目录之外的HTML文件。在创建webpack-dev-server之前就知道文件的路径。
Webpack似乎只适用于捆绑和提供JavaScript文件，但我在为这个简单的用例设置它时遇到了麻烦。
（我知道有像Vite这样的替代品，但我的项目已经安装了Webpack。如果可能的话，我希望避免添加/切换到另一个库。
谢谢！

webpack

来源：https://stackoverflow.com/questions/75367404/using-webpack-dev-server-to-serve-html-pages-outside-of-project-directory

1条答案

按热度按时间

mqkwyuun1#

我的破解方案是以编程方式写入一个JS文件，将HTML注入到index.html中，然后在每次更改HTML文件时重写该JS文件。
样本代码：

const root = document.getElementById("root");

// assuming fileContent is the content of my HTML file
root.innerHTML = "${fileContent.trim()}";

然后将JS文件传递给webpack，webpack在我的输出目录中生成一个"bundle.js"。
下面是我的index.html文件：

// index.html
<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
    <script type="module" src="./bundle.js"></script>
  </body>
</html>

赞(0）回复(0）举报 2023-02-08

我来回答

使用webpack-dev-server提供项目目录外的HTML页面

1条答案

相关问题

热门标签

最新问答