webpack-webpackDevServer解决单页面应用路由的问题

npm install react-router-dom --save

react页面：

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

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

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

Home：

import React, { Component } from 'react';

class Home extends Component {
    render() {
        return <div>Home Page</div>
    }
}

export default Home;

List：

import React, { Component } from 'react';

class List extends Component {
    render() {
        return <div>List Page</div>
    }
}

export default List;

当我们启动服务器的时候，发现HomePage可以正常显示，而切换到'http://localhost:8080/list'的时候会提示不存在，因为浏览器默认会展示list.html的内容，然而并不存在，所以失败。我们只需要在devServer中配置即可：

devServer: {
    contentBase: './dist',
    open: true,
    port: 8080,
    hot: true,
    hotOnly: true,
    historyApiFallback:true
}

historyApiFallback除了是一个布尔值，还可以是一个对象：

devServer: {
    historyApiFallback: {
      rewrites: [
        { from: /abc.html/, to: '/index.html' }
      ]
    }
  }

上述配置意思是当我们访问abc.html时，实际访问的事index.html。而当我们设置为true的时候，实际上等价于：

devServer: {
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: '/index.html' }
      ]
    }
  }

一般来说，我们只要设置为true就可以解决路由上的问题，除非有一些特殊情况，才需要配置成一个对象。