Приложение Express для двух веб-пакетов (клиент, сервер), не содержащее HTML-файлы

Question

Я создаю приложение, имеющее Node Backend, которое я пытаюсь связать с Webpack.

Сначала у меня была одна конфигурация Webpack, которая имела target: node. Я не смог скомпилировать Websockets в пакет внешнего интерфейса, если я не изменил его на target: web, но это не компилировало мои изменения кода бэкенда. Мне бы пришлось бежать tsc && webpack.

Теперь мне нужно два конфига, чтобы скомпилировать их отдельно. Моя текущая конфигурация:

const path = require("path");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
var fs = require("fs");

var nodeModules = {};
fs.readdirSync("node_modules")
  .filter(function(x) {
    return [".bin"].indexOf(x) === -1;
  })
  .forEach(function(mod) {
    nodeModules[mod] = "commonjs " + mod;
  });

const common = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/
      },
      {
        test: /\.html$/,
        use: [{ loader: "html-loader" }]
      }
    ]
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"]
  }
};

const frontend = {
  entry: "./src/index.ts",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "build"),
    publicPath: "/"
  },
  target: "web",
  plugins: [
    new CopyWebpackPlugin([
      {
        from: path.resolve(
          "node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"
        ),
        to: path.resolve(__dirname, "build/vendor")
      },
      {
        from: path.resolve(
          "node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
        ),
        to: path.resolve(__dirname, "build/vendor")
      }
    ]),
    new HtmlWebpackPlugin({
      title: "Flop The World Poker",
      template: "build/index.template.html"
    })
  ]
};

const backend = {
  entry: "./src/server.ts",
  output: {
    filename: "server.js",
    path: path.resolve(__dirname, "build"),
    publicPath: "/"
  },
  target: "node",
  externals: nodeModules
};

module.exports = [
  Object.assign({}, common, frontend),
  Object.assign({}, common, backend)
];

Прежде, чем я переключился на две конфигурации, я смог разместить свой index.html, который находится в моей выходной папке, используя:

import bodyParser from "body-parser";
import express from "express";
import { createServer } from "http";
import { listen } from "socket.io";
import { DeckController} from "./controllers";

const app: express.Application = express();
const port: number = ((process.env.PORT as any) as number) || 3000;

const server = createServer(app);
const io = listen(server);

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.use(express.static("static"));
app.use("/deck", DeckController);
app.use(express.static(__dirname, { extensions: ["html"] }));

server.listen(port, () => {
  console.log(`Listening at http://localhost:${port}/`);
});

io.on("connection", socket => {
  console.log("Client connected..");

  socket.on("join", data => {
    console.log(data);
  });
});

Я сейчас получаю cannot get /. Я могу настроить маршрут как

router.get("/", (req: Request, res: Response) => {
  res.send("Hello World");
});

и получите Hello World в браузере.

Может ли кто-нибудь помочь мне выяснить, что изменилось: теперь я не могу разместить свой HTML-файл?

Answer 1

Я исправил это с помощью Роберта в комментариях. Вот мои новые файлы:

const path = require("path");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
var fs = require("fs");

var nodeModules = {};
fs.readdirSync("node_modules")
  .filter(function(x) {
    return [".bin"].indexOf(x) === -1;
  })
  .forEach(function(mod) {
    nodeModules[mod] = "commonjs " + mod;
  });

const common = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"]
  }
};

const frontend = {
  entry: "./src/index.ts",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "build"),
    publicPath: "/"
  },
  target: "web",
  plugins: [
    new CopyWebpackPlugin([
      {
        from: path.resolve(
          "node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"
        ),
        to: path.resolve(__dirname, "build/vendor")
      },
      {
        from: path.resolve(
          "node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
        ),
        to: path.resolve(__dirname, "build/vendor")
      }
    ]),
    new HtmlWebpackPlugin({
      title: "Flop The World Poker",
      template: "build/index.template.html"
    })
  ]
};

const backend = {
  entry: "./src/server.ts",
  output: {
    filename: "server.js",
    path: path.resolve(__dirname, "build"),
    publicPath: "/"
  },
  target: "node",
  externals: nodeModules
};

module.exports = [
  Object.assign({}, common, frontend),
  Object.assign({}, common, backend)
];

import bodyParser from "body-parser";
import express from "express";
import { createServer } from "http";
import { listen } from "socket.io";
import { DeckController } from "./controllers";

const app: express.Application = express();
const port: number = ((process.env.PORT as any) as number) || 3000;

const server = createServer(app);
const io = listen(server);

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.use(express.static("./build"));
app.use("/deck", DeckController);
app.use(express.static(__dirname, { extensions: ["html"] }));

server.listen(port, () => {
  // tslint:disable-next-line:no-console
  console.log(`Listening at http://localhost:${port}/`);
});

io.on("connection", socket => {
  console.log("Client connected..");

  socket.send("Testing Message");

  socket.on("join", data => {
    console.log(data);
  });
});