将多页面框架中的 index 页面改成单页面应用框架

npm i --save react-router-dom

import React from 'react';
import { HashRouter, Route, Switch } from "react-router-dom";

const NoMatch = React.lazy(() => import(/* webpackChunkName: "components/NoMatch" */ './../../components/NoMatch/NoMatch'));
const Home = React.lazy(() => import(/* webpackChunkName: "index/Home" */ './views/Home/Home'));
const Test = React.lazy(() => import(/* webpackChunkName: "index/Test" */ './views/Test/Test'));

function App(props) {

  return (
    <HashRouter>
      <React.Suspense fallback={''}>
        <Switch>
          <Route exact path='/' component={Home} />
          <Route exact path='/test' component={Test} />
          <Route component={NoMatch} />
        </Switch>
      </React.Suspense>
    </HashRouter>
  )
}

export default App;

multiple-page
├── README.md
├── config
│   ├── env.js
│   ├── getHttpsConfig.js
│   ├── jest
│   │   ├── cssTransform.js
│   │   └── fileTransform.js
│   ├── modules.js
│   ├── paths.js
│   ├── pnpTs.js
│   ├── webpack.config.js
│   └── webpackDevServer.config.js
├── package.json
├── public
│   ├── favicon.ico
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── scripts
│   ├── build.js
│   ├── start.js
│   └── test.js
├── src
│   ├── components
│   │   └── NoMatch
│   │       ├── NoMatch.js
│   │       └── NoMatch.less
│   └── views
│       ├── demo
│       │   ├── demo.html
│       │   └── demo.js
│       └── index
│           ├── App.js
│           ├── index.html
│           ├── index.js
│           └── views
│               ├── Home
│               │   ├── Home.js
│               │   └── Home.less
│               └── Test
│                   ├── Test.js
│                   └── Test.less
├── tools.js
└── yarn.lock

npm i --save less less-loader

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
    },
    'less-loader'
  ),
  // Don't consider CSS imports dead code even if the
  // containing package claims to have no side effects.
  // Remove this when webpack adds a warning or an error for this.
  // See https://github.com/webpack/webpack/issues/6571
  sideEffects: true,
},