【webpack】新的起航27 -- webpackDevServer解决单页面应用路由问题

写一个React单页面的路由配置

代码地址：

我们新建两个文件作为路由的跳转的页面，home.js list.js 代码如下：

list.js：

import React,{ Component } from 'react'

class List extends Component{
    render(){
        return <div>我是List页面</div>
    }
}

export default List;

同理home页面也是一样，只是将List改为Home即可，这里不展示代码了；

然后我们通过index.js也就是可以看成React中的入口文件，将路由页面整合起来 ↓

import React,{ Component } from 'react'
import {BrowserRouter, Route} from 'react-router-dom'
import ReactDom from 'react-dom'
import Home from './home'
import List from './list'

class App extends Component{

    render(){
        return (
           <BrowserRouter>
                <div>
                    <Route path='/' exact component={Home} />
                    <Route path='/list' component={List} />
                </div>
           </BrowserRouter>
        )
    }
}

ReactDom.render(<App />, document.getElementById('root'));

可以看出我们使用React路由的跳转还需要安装一下 npm install react-router-dom 这个库（类似于Vue中的vue-router），然后使用React路由的写法格式将路由跳转的路径，以及对应的路由组件填好即可，此时我们看是没问题，打包一下npm run dev，好像报错了？

我们访问list页面是报了404资源不存在，什么原因？这会经常出现在我们前端单页面跳转时经常出现的问题，根据上面的请求方式，前端发出的请求是访问后端list这个页面，但我们知道我们前端就只单单存在一个页面，也就是入口页面index.html，根本没有list所以它会报错；但我们知道这个相关的页面其实都打包进了main.js里面，如何可以访问到这里，那就应该不会报错了，我们应该怎么做呢？ ↓

使用historyApiFallback配置

配置：

在WebpackDevServer中解决这个问题非常简单，我们可以去官网找到这样的一个配置属性historyApiFallback，然后写在devServer配置项里面，设置为true即可，现在我们在来重新打包编译，发现的确可以成功跳转，也正常显示了对应的页面

原理：

配置了该属性为true的话，无论你访问的路径是否有对应的页面，都直接偷偷换成根路径范文，返回的值必然就是index.html，其中入口文件也在这个页面中引入，所以就会去打包文件里找到对应页面的逻辑代码返回，没有的话也不会报错，只是页面可能空白而已，比如下图我们访问一个ccc的路径，一样返回index.html的页面代码

historyApiFallback其他配置：

我们可以借助 关于这部分配置的webpack官方文档 配置一些对应跳转返回的页面，比如如果访问路径为abc.html，则会跳转为根目录中view文件下的landing.html，也可以配置多个跳转，比如访问路径中不包含 . 这个字符时，就会跳转一个名为404.html的页面，可以看出可以通过historyApiFallback做一些特殊路径的返回页面操作

historyApiFallback: {
    rewrites: [
      { from: /abc.html/, to: '/views/landing.html' },
      { from: /./, to: '/views/404.html' }
    ]
},

其实我们直接参数设置为true就等价于，{ from: /\.*\/, to: '/index.html' } ，关于更多的配置参数可以看github上的文档 → 戳这里

结语

注意这里讲的是开发时的historyApiFallback如何配置来解决路由的跳转规则，如果发布到线上还需要后端通过nginx或者aphe这些代理服务器配置一下相关的webpackDevServer配置，这样我们才可以在线上也使用这种单页面切换路由的功能

#下一篇【eslint怎么在webpack中去配置~】