Question

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

我有一个相当简单的tic-tac-toe应用程序，其结构如下：

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

您所做的一切正确：

您只需要一个客户端捆绑包。在服务器上，节点处理依赖项，因此您不需要服务器端捆绑包。
在dist/index.html生成的HTML文件中确实注入了<script>标签，该标签指向您的JavaScript包，这要归功于HtmlWebpackPlugin。
您的直觉（“在节点服务器中使用sendFile”）是正确的！请注意，许多框架都包含实用程序方法，可将路由绑定到包含静态文件的目录。例如，这是表达方式：https://expressjs.com/en/starter/static-files.html

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

1 个答案: