//eg
import('/component/details').then(mod=>{
  console.log(mod)
},error=>{
  console.log(error)
})

//roter配置的分割代碼
import Vue from 'vue'
import Router from 'vue-router'
const listnav=()=> import('@/components/listnav')
const adminav=()=> import('@/components/adminav')
Vue.use(Router)
const router = new Router({
  routes:[{
    path:'/listnav',
    name:'listnav',
    component:listnav
  },
  {
    path:'/adminav',
    name:'adminav',
    component:adminav
  }
  ]
})
export default router

//webpack.base.conf.js
moudle.exports = {
  entry:{
    app:'./src/main.js'
  },
  output:{
    path:"../dist",
    filename:'js/[name].js',
    chunkFilename:'js/[name].js'
  }
}

//router配置分割代碼
import React, {PureComponent, Component ,createElement} from 'react';
import {HashRouter as Router, Route,Link,withRouter} from 'react-router-dom';
import Home from "../component/home"
function getAsyncComponent(load) {
 return class AsyncComponent extends PureComponent {
  constructor(props) {
   super(props);
  }
  componentDidMount() {
   // 在高階組件 DidMount 時(shí)才去執(zhí)行網(wǎng)絡(luò)加載步驟
   load().then(({default: component}) => {
   // 代碼加載成功，獲取到了代碼導(dǎo)出的值，調(diào)用 setState 通知高階組件重新渲染子組件
    this.setState({
     component,
    })
   });
  }
  render() {
   const {component} = this.state || {};
   // component 是 React.Component 類(lèi)型，需要通過(guò) React.createElement 生產(chǎn)一個(gè)組件實(shí)例
   return component ? createElement(component) : null;
  }
 }
}
const Routes = () =>(
  <HashRouter>
    <Route path="/home/:test" exact component={Home}/>
    <Route path='/details/:id' component={getAsyncComponent(
     // 異步加載函數(shù)，異步地加載 details組件
     () => import('../component/details')
    )}/>
  </HashRouter>
)
export default Routers;

//webpack.base.config.js
module.exports = {
  entry:{
    main: "../src/index.js", //入口文件
  },
  output:{
    path:"../dist",//出口文件
    filename:"js/[name].js",
    chunkFilename:"js/[name].js",
    publicPath: ''
  }
}

//component/details.js
import React, { Component } from 'react';
import {withRouter} from 'react-router-dom';
class Details extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    console.log(this.props)
    return (
      <div></div>
    )
  }
}
export default withRouter(Details);