使用名称 \"Main\" 的 webpack 上的多个条目出现问题答案

【问题标题】：Issue with multiple entries on webpack using name "Main"使用名称 \"Main\" 的 webpack 上的多个条目出现问题
【发布时间】：2023-01-08 13:46:43
【问题描述】：

我对使用 react、node js 和 express 很陌生。为了开始，我遵循了官方文档中的 this 教程。

据我了解，我的 webpack-config.js 设置有多个条目，目的是生成多个 js 文件。

module.exports = {
    devtool: 'source-map',
    mode: "development",
    entry:
    {
        app: "./src/app/app.tsx",
        test: "./src/test/test.tsx"
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: './[name]-app-bundle.js'
    },
    resolve: {
        extensions: ['.Webpack.js', '.web.js', '.ts', '.js', '.jsx', '.tsx']
    },
    module: {
        rules: [
            {
                test: /\.tsx$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'ts-loader'
                }
            }
        ]
    }
}

但是，当我运行 npm run build 或 node_modules\.bin\webpack ./src/app/app.tsx ./src/test/test.tsx --config webpack-config.js 时，我得到了输出：

> webpack-cli ./src/app/app.tsx ./src/test/test.tsx --config webpack-config.js

asset ./main-app-bundle.js 1.09 MiB [compared for emit] (name: main) 1 related asset
runtime modules 123 bytes 1 module
modules by path ./node_modules/ 1.08 MiB
  modules by path ./node_modules/react/ 85.7 KiB
    ./node_modules/react/index.js 190 bytes [built] [code generated]
    ./node_modules/react/cjs/react.development.js 85.5 KiB [built] [code generated]
  modules by path ./node_modules/react-dom/ 1000 KiB
    ./node_modules/react-dom/index.js 1.33 KiB [built] [code generated]
    ./node_modules/react-dom/cjs/react-dom.development.js 1000 KiB [built] [code generated]
  modules by path ./node_modules/scheduler/ 17.3 KiB
    ./node_modules/scheduler/index.js 198 bytes [built] [code generated]
    ./node_modules/scheduler/cjs/scheduler.development.js 17.1 KiB [built] [code generated]
modules by path ./src/ 2.9 KiB
  ./src/app/app.tsx 2.65 KiB [built] [code generated]
  ./src/test/test.tsx 250 bytes [built] [code generated]
webpack 5.74.0 compiled successfully in 1687 ms

据我所知，我的两个条目都被命名为“Main”，因为生成的文件被命名为“main-app-bundle.js”，并且这只生成一个 js 文件（加上地图）。经过数小时的研究和尝试修复，我仍然不确定我哪里出错了。谁能指出我正确的方向？

【问题讨论】：

webpack 的全部意义在于将多个模块捆绑到一个文件中？消息说“编译成功”？您是否尝试过使用 dist 文件夹作为根运行服务器？
@ChrisG 我能够让服务器运行。我将生成的脚本文件链接到 html 文件，逻辑似乎工作正常，除非你得到一个不存在的元素。也许这更多是我的误会。我的印象是，如果我想向我的网站添加一个新页面，我需要为该页面使用一个新的 .tsx（和生成的 .js）文件。我应该为多个页面使用单个 .tsx 文件吗？
这完全取决于您的应用程序将如何工作。 React 应用程序不使用经典导航，您可以在其中单击导致加载新文档的链接。您可以使用 react-router 模拟此行为，但 React 应用程序几乎总是单页应用程序。您绝对可以为每个页面使用专用的 .tsx 文件，但您不必这样做。
当您使用 node/express 后端创建 React 应用程序时，express 通常会做两件事：1) 提供构成 React 应用程序的静态文件 2) 为应用程序提供 API 以加载/处理数据。
这是一个非常基本的示例，显示导航的外观：jsfiddle.net/3Le0stfk

标签： javascript node.js reactjs webpack

【解决方案1】：

我重新创建了您在 webpack 中拥有的环境，如果它对我有用，只需运行“npx webpack build”，因为我不知道您使用 BUILD 运行什么脚本；在我的环境中，它可以工作我将共享文件供您查看。

webpack.config.js

const path = require("path");
module.exports = {
  devtool: "source-map",
  mode: "development",
  entry: {
    app: "./src/app.js",
    test: "./src/test.js",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "./[name]-app-bundle.js",
  },
  resolve: {
    extensions: [".Webpack.js", ".web.js", ".ts", ".js", ".jsx", ".tsx"],
  },
  module: {
    rules: [
      {
        test: /.tsx$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "ts-loader",
        },
      },
    ],
  },
};

包.json

{
  "name": "letcode",
  "version": "1.0.0",
  "description": "",
  "main": "example.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "path": "^0.12.7",
    "webpack": "^5.75.0"
  },
  "devDependencies": {
    "webpack-cli": "^5.0.1"
  }
}

https://webpack.js.org/concepts/entry-points/#separate-app-and-vendor-entries

【讨论】：