如何让我的Web服务器同时提供html文件和通过webpack构建的js文件？_Webpack_Webserver

如何让我的Web服务器同时提供html文件和通过webpack构建的js文件？

webpack

如何让我的Web服务器同时提供html文件和通过webpack构建的js文件？,webpack,webserver,Webpack,Webserver,我正在尝试编写一个Web服务器，它将为我正在使用webpack构建的react应用程序提供服务，但我遇到了一个问题，它同时为html文件和js文件提供服务，而js文件包含我编写的非常简单的react应用程序我的html文件如下所示： <html> <body> <div id="root" /> <script src="./dist/main.js"></script> </bo

我正在尝试编写一个Web服务器，它将为我正在使用webpack构建的react应用程序提供服务，但我遇到了一个问题，它同时为html文件和js文件提供服务，而js文件包含我编写的非常简单的react应用程序

我的html文件如下所示：

<html>
    <body>
        <div id="root" />
        <script src="./dist/main.js"></script>
    </body>
</html>

其中main.js是构建的webpack js文件（很抱歉，如果我的术语关闭了，请让我知道这是否清楚）。我假设我需要以某种方式为两者服务，但我不确定如何做到这一点——或者这是否是开始时的正确方法

对于更多的上下文，当我通过浏览器上的本地路径打开react应用程序时，它就会打开，并且我已经测试过我的Web服务器是否提供非常简单的html文件

非常感谢

尝试使用express.js，并根据需要创建静态文件夹（如果所有内容都在同一主文件夹中，则可能需要1个）（我将其命名为mines public and dist）然后

编辑：若你们需要更粗糙的方式，你们需要更多的改进，比如错误处理mime类型等


var http = require('http');
const fs = require("fs");
const pathUtils = require("path");

//create a server object:
http.createServer(function(req, res) {
    var path1 = pathUtils.resolve(__dirname, "public") + req.url.replace(/\//g, "\\");
    fs.exists(path1, (exists) => {
        if (exists) {
            fs.readFile(path1, "utf8", (error, content) => {
                if (content)
                    res.write(content);
                else if (error)
                    res.write(error)
                res.end();
            })
        } else {
            res.write("NotFound");
            res.end();
        }
    })
    console.log(path1);

}).listen(8080);

尝试使用express.js，并根据需要创建静态文件夹（如果所有内容都在同一主文件夹中，则可能需要1个）（我将其命名为mines public and dist）然后

编辑：若你们需要更粗糙的方式，你们需要更多的改进，比如错误处理mime类型等


var http = require('http');
const fs = require("fs");
const pathUtils = require("path");

//create a server object:
http.createServer(function(req, res) {
    var path1 = pathUtils.resolve(__dirname, "public") + req.url.replace(/\//g, "\\");
    fs.exists(path1, (exists) => {
        if (exists) {
            fs.readFile(path1, "utf8", (error, content) => {
                if (content)
                    res.write(content);
                else if (error)
                    res.write(error)
                res.end();
            })
        } else {
            res.write("NotFound");
            res.end();
        }
    })
    console.log(path1);

}).listen(8080);

谢谢你给艾哈迈特的小费！但我目前最感兴趣的是学习这些东西是如何工作的，所以如果可能的话，我想尝试使用一个手写的web服务器来实现它。不过我还是很感激你的建议！第二个选项是不推荐的，尽管您需要对代码进行太多的改进！但我目前最感兴趣的是学习这些东西是如何工作的，所以如果可能的话，我想尝试使用一个手写的web服务器来实现它。不过我还是很感激你的建议！第二个选项是不推荐的，尽管您需要对代码进行太多的改进。正确的方法是让webpack生成带有

标记的.html文件，该标记引用webpack生成的.js文件。这样的.js文件称为脚本包。Webpack是一个捆绑程序，用于构建捆绑包。稍后，当您要求webpack在脚本包的名称中包含哈希值时，这种方法的优势将变得非常明显，例如

main..js

。这有助于版本控制。html文件由Web服务器提供。在开发中使用webpack dev server，在生产中经常使用ExpressJS。正确的方法是让webpack生成.html文件，其中

标记引用webpack生成的.js文件。这样的.js文件称为脚本包。Webpack是一个捆绑程序，用于构建捆绑包。稍后，当您要求webpack在脚本包的名称中包含哈希值时，这种方法的优势将变得非常明显，例如

main..js

。这有助于版本控制。html文件由Web服务器提供。在开发中使用webpack dev server，在生产中经常使用ExpressJS。