如何将客户端捆绑包（webpack）提供给NodeJS服务器？

Question

我在理解如何捆绑我的应用程序时遇到麻烦，然后告诉我的NodeJs服务器我想在根路由上使用该捆绑包。 我的问题是比特定的调试帮助更多地了解我应该如何去做，但是我要添加一些文件夹结构和webpack配置以帮助说明我的观点。

我有一个非常简单的井字游戏应用程序，其结构如下：

tic-tac-toe
  src/
    app.js (server)
    views/
      index.html
    public/
      script/
        index.js
        ...every other JS file
      css/
        index.css

现在让我们忽略服务器，并假设我只想使用webpack捆绑我的所有JS文件。 通过一个简单的webpack配置文件，我有：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/public/script/index.js",
  output: {
    path: path.resolve(__dirname, "./dist/"),
    filename: "bundle.client.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/
      }
    ]
  },
  plugins: [new HtmlWebpackPlugin({ template: "./src/views/index.html" })]
}

通过以下配置，当我在浏览器中打开html文件时，我有一个正常运行的应用程序，该应用程序加载了样式和所有适当的JS依赖项。

现在出现问题了，当我想在NodeJS服务器上提供此html文件（如果我正确阅读了文档，并注入了所有必需的软件包）。 我不确定应该如何进行。 我应该只将dist文件夹中的index.html与节点服务器中的sendFile一起使用吗？ 我是否应该将捆绑软件的入口点更改为App.js节点服务器？ 我需要为客户端提供捆绑软件，为服务器提供其他捆绑软件吗？ 还是我遗漏了一些明显的东西来阻止我这样做？

Answer 1

您做对了所有事情：

• 您只需要一个客户端捆绑。 在服务器上，节点处理依赖项，因此您不需要服务器端捆绑包。

• 由于HtmlWebpackPlugin ，在dist/index.html生成的HTML文件中确实注入了指向您的javascript捆绑包的<script>标记。

• 您的直觉（“在节点服务器中使用sendFile ”）是正确的！ 请注意，许多框架都包含实用程序方法，可将路由绑定到包含静态文件的目录。 例如，这是表达方式： https : //expressjs.com/en/starter/static-files.html