webpack4 に基づいて反応プロジェクト フレームワークを構築する方法

 git clone https://gitee.com/wjj0720/react-demo.git
 cd react-demo
 yarn
 yarn start

yarn build

 +node_modules
 -src
  +asset
  +Layout
  +pages
  +redux
  +utils
  +app.js
  +index.html
  +index.js
 .babelrc 
 package.json 
 postcss.config.js
 webpack.config.js //webpack 配置

 // webpack.config.js 配置
 module: {
  rules: [
   {
    test: /\.bundle\.js$/,
    use: {
     loader: 'bundle-loader',
     options: {
      name: '[name]',
      lazy: true
     }
    }
   }
  ]
 }
 // 页面引入组件
 import Home from "bundle-loader?lazy&name=[name]!./Home";

 // 组件使用 因为组件懒加载 是通过异步的形式引入 所以不能再页面直接以标签的形式使用 需要做使用封装 
 import React, {Component} from 'react'
 import { withRouter } from 'react-router-dom'
 class LazyLoad extends Component {
  state = {
   LoadOver: null
  }
  componentWillMount() {
   this.props.Loading(c => {
    this.setState({
     LoadOver: withRouter(c.default)
    })
   })
  }
 
  render() {
   let {LoadOver} = this.state;
   return (
    LoadOver ? <LoadOver/> : <p>加载动画</p>
   )
  }
 }
 export default LazyLoad

 // 通过封装的懒加载组件过度 增加加载动画
 <LazyLoad Loading={Home} />

 // 通过require.context读取模块下路由文件
 const files = require.context('./pages', true, /route\.js$/)
 let routers = files.keys().reduce((routers, route) => {
  let router = files(route).default
  return routers.concat(router)
 }, [])

 // 模块路由文件格式
 import User from "bundle-loader?lazy&name=[name]!./User";
 export default [
  {
   path: '/user',
   component: User
  },
  {
   path: '/user/:id',
   component: User
  }
 ]