devServer中的historyApiFallback配置（问题：初建webpack+react路由跳转页面Cannot GET /login）

webpack+react初步搭建项目后，首次添加路由进行路由跳转，发现页面不能正常展示。

此时webpack的配置是:

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports ={
    mode:"development",
    //  打包的入口文件
    entry:{
        main:"./main.tsx",
    },
    output:{
        path:path.resolve(__dirname,"dist")
    },
    plugins: [new HtmlWebpackPlugin({template:"./public/index.html",filename:"index.html"})],
    devServer: {
        static: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000,
      },
    resolve: {
      extensions: ['.tsx', '.ts', '.js'], //省略后缀名
      alias: {
        '@': path.resolve(__dirname, 'src') // 添加别名配置
    }
    },
      //模块配置规则 loader配置
    module: {
        //第三方匹配规则(多个loader的话要写成数组)
        rules: [
            { 
              test: /\.js|jsx$/, 
              exclude: /node_modules/, 
              use: 'babel-loader' 
            },//在配置babel-loader的时候一定要加上exclude，否则项目会报错跑不起来
            {
                test: /\.ts|tsx$/,
                use: 'ts-loader',
            },
          {
              test: /\.scss$/,
              // 增加 'less-loader' ，注意顺序
              use: ['style-loader',  "css-loader", "sass-loader",]
            }
        ]
    }

}

此时注意devServer中的配置，在里面添加 historyApiFallback: true，然后重新npm run start启动项目，即可正常跳转展示页面。
这个配置项用于指定当路由不匹配时是否回退到 index.html 页面。

• 如果你希望所有的路由都回退到 index.html 页面，即你的应用是一个单页应用（SPA）（已知react是单页面应用），则可以将 historyApiFallback 设置为 true。这样，无论用户访问的是哪个路由，都会返回 index.html，然后由前端路由来处理页面的显示和渲染。
• 如果你的应用是一个多页应用，每个页面都有自己的独立路由，你希望每个路由都对应一个实际的页面文件，那么可以将 historyApiFallback 设置为 false。这样，当访问不存在的路由时，服务器将返回 404 错误页面，而不是回退到 index.html。