React TypeScript示例运行npm run start报错Cannot GET /求助

问题根源 #

你使用的webpack-dev-server是v4版本，而2021年书籍中的配置针对的是v3版本，两者核心配置逻辑存在差异，仅添加publicPath: "/"不足以解决问题，需要补充devServer的静态目录配置。

修复步骤 #

1. 修改webpack.config.js，添加devServer配置
   重点补充devServer字段，指定静态文件目录为项目根目录，修改后的配置如下：

   const path = require('path');
   module.exports = {
       entry: {
           main: path.join(__dirname, 'zadanie1.ts'),
       },
       output: {
           filename: "zadanie1.js",
           path: __dirname,
           publicPath: "/"
       },
       module: {
           rules: [
               {
                   test: /\.tsx?$/,
                   loader: "ts-loader",
                   exclude: /node_modules/,
               },
           ]
       },
       resolve: {
           extensions: [".tsx", ".ts", ".js"]
       },
       devServer: {
           static: {
               directory: __dirname, // 告知dev server从项目根目录读取静态文件
           },
           open: true, // 自动打开浏览器（可选）
           port: 3000 // 指定运行端口（可选）
       }
   };
   

2. 修复tsconfig.json的语法错误
   原配置中compilerOptions对象末尾有多余逗号，会导致解析失败，修正后如下：

   {
     "compilerOptions": {
       "target": "ES5",
       "module": "CommonJS",
       "sourceMap": true,
       "removeComments": true
     }
   }
   

3. 重新启动服务
   执行npm run start，此时webpack-dev-server会正确加载根目录下的index.html，页面将显示"Hello World!"。

关键差异说明 #

webpack-dev-server v4用static.directory替代了v3版本的contentBase字段来指定静态资源目录，这是书籍内容过时引发问题的核心原因。

内容的提问来源于stack exchange，提问作者gipcu