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

Question

I am having trouble understanding how to bundle my application and then telling my NodeJs server that I want to use that bundle on my root route. My question is more to understand how I should go about it than specific debugging help, but I am adding some of my folder structure and webpack config to help illustrate my point.

I have a fairly simple tic-tac-toe application with a structure like so:

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

Let's ignore the server for now and assume I just want to use webpack to bundle all of my JS files. With a simple webpack config file, I have:

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" })]
}

With the following configuration, when I open my html file in the browser, I have a functional application that loaded the style and all the approriate JS dependencies.

Now the problem comes when I want to serve this html file(which, if I read the doc correctly, was injected with all the required bundles) on a NodeJS server. I am unsure as to how I should proceed. Should I simply use sendFile in my node Server with index.html from the dist folder? Should I change the entry point of my bundle to be my App.js Node server? Do I need a bundle for the client and a different one for the server? Or am I missing something obvious that prevents me from doing this?

Answer 1

You're doing everything right:

• You only need a client-side bundle. On the server, node handles dependencies, so you don't need a server-side bundle.

• The HTML file generated at dist/index.html is indeed injected with a <script> tag pointing to your javascript bundle, thanks to HtmlWebpackPlugin .

• Your intuition ("use sendFile in your node server") is correct! Note that many frameworks include utility methods to bind a route to a directory containing static files. For example, here's how express does it: https://expressjs.com/en/starter/static-files.html