使用 WebpackDevServer 解决单页面应用路由问题

Webpack中文：
DevServer | webpack 中文文档

为什么

我们在使用单页面框架进行开发的时候经常会使用到Router路由这个概念，那么Webpack如何配置路由 404 的问题呢？
先来安装一下路由
安装：

$ npm install react-router-dom -S

引入两个React代码文件和路由：

import React, { Component } from "react"; 
import ReactDom from "react-dom";
import { BrowserRouter, Route } from "react-router-dom";
import Home from './home.js'
import List from './list.js'
class App extends Component {
  render() {
    return (
      <div>
      <BrowserRouter>
      <Route path="/" exact component={Home}></Route>
      <Route path="/list" component={List}></Route>
      </BrowserRouter>
      </div>
    )
  }
}
ReactDom.render(<App />,document.getElementById("root"));

import React, { Component } from "react"; 
class Home extends Component {
  render() {
    return <div>HomePage</div>
  }
}
export default Home;

import React, { Component } from "react"; 
class List extends Component {
  render() {
    return <div>ListPage</div>
  }
}
export default List;

index.js文件主要配置了路由表，根据路径对React代码文件进行映射，我们来看一下效果。

这个时候就能看到页面 404 了，这是因为项目运行以为/home是要查找项目下的home.html文件，所有才会 404 了，这和Nginx上运行是一样的。

是什么

这个时候就需要我们对Webpack的配置文件进行devServer.historyApiFallback配置：

// ...
module.exports = {
  // ...
  devServer: {
    contentBase: "./dist",
    open: true,
    hot: true,
    hotOnly: true,
    // 所有路由都响应 index.html 的内容
    historyApiFallback: true, 
    proxy: {
      "/react/api": {
        target: "http://www.dell-lee.com",
        // 容许请求 https
        secure: false,
        pathRewrite: {
          "header.json": "demo.json"
        },
        changeOrigin: true
      }
    }
  },
  // ...
}

然后重新运行项目npm run build就能看到正常的页面啦。

更多配置项：
1、connect-history-api-fallback：
GitHub - bripkens/connect-history-api-fallback: Fallback to index.html for applications that are using the HTML 5 history API
2、devserverhistoryapifallback：
DevServer | webpack 中文文档 :::warning ⚠️ 注意
仅在开发环境有效 :::