這篇文章主要介紹基于webpack4如何搭建的react項目框架，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站建設(shè)、網(wǎng)站制作、禪城網(wǎng)絡(luò)推廣、重慶小程序開發(fā)、禪城網(wǎng)絡(luò)營銷、禪城企業(yè)策劃、禪城品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；成都創(chuàng)新互聯(lián)為所有大學生創(chuàng)業(yè)者提供禪城建站搭建服務(wù)，24小時服務(wù)熱線：18980820575，官方網(wǎng)址：www.cdcxhl.com

介紹

框架介紹，使用webpac構(gòu)建的react單頁面應(yīng)用，集成antd。使用webpack-dev-server啟動本地服務(wù)，加入熱更新便于開發(fā)調(diào)試。使用bundle-loader進行代碼切割懶加載

手動搭建，不使用cli，大量注釋適合初學者對webpack的理解學習，對react項目的深入了解

啟動

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

打包

yarn build

目錄結(jié)構(gòu)

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

bundle-loader 懶加載使用

 // 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 ?  : 
加載動畫
   )
  }
 }
 export default LazyLoad

 // 通過封裝的懶加載組件過度 增加加載動畫
 

路由配置

框架按照模塊劃分，pages文件夾下具有route.js 即為一個模塊

 // 通過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
  }
 ]

redux 使用介紹

 // ---------創(chuàng)建 --------
 // 為了不免action、reducer 在不同文件 來回切換 對象的形式創(chuàng)建

 // createReducer 將書寫格式創(chuàng)建成rudex認識的reducer
 export function createReducer({state: initState, reducer}) {
  return (state = initState, action) => {
   return reducer.hasOwnProperty(action.type) ? reducer[action.type](state, action) : state
  }
 }

 // 創(chuàng)建頁面級別的store
 const User_Info_fetch_Memo = 'User_Info_fetch_Memo'
 const store = {
  // 初始化數(shù)據(jù)
  state: {
   memo: 9,
   test: 0
  },
  action: {
   async fetchMemo (params) {
    return {
     type: User_Info_fetch_Memo,
     callAPI: {url: 'http://stage-mapi.yimifudao.com/statistics/cc/kpi', params, config: {}},
     payload: params
    }
   },
   ...
  },
  reducer: {
   [User_Info_fetch_Memo] (prevState = {}, {payload}) {
    console.log('reducer--->',payload)
    return {
     ...prevState,
     memo: payload.memo
    }
   },
   ...
  }
 }

 export default createReducer(store)
 export const action = store.action

 // 最終在模塊界別組合 [當然模塊也有公共的數(shù)據(jù)(見Home模塊下的demo寫法)]
 import {combineReducers} from 'redux'
 import info from './Info/store'
 export default combineReducers({
  info,
  。。。
 })

 // 最終rudex文件夾下的store.js 會去取所有模塊下的store.js 組成一個大的store也就是我們最終倉庫

 // --------使用------
 // 首先在app.js中將store和app關(guān)聯(lián)
 import { createStore } from 'redux'
 import { Provider } from 'react-redux'
 // reducer即我們最終
 import reducer from './redux/store.js'
 // 用戶異步action的中間件
 import middleware from './utils/middleware.js'
 let store = createStore(reducer, middleware)
 
  。。。
 


 // 然后組件調(diào)用 只需要在組件導(dǎo)出時候 使用connent鏈接即可
 import React, {Component} from 'react'
 import {connect} from 'react-redux'
 // 從頁面級別的store中導(dǎo)出action
 import {action} from './store'

 class Demo extends Component {
  const handle = () => {
   // 觸發(fā)action
   this.props.dispatch(action.fetchMemo({}))
  }
  render () {
   console.log(this.props.test)
   return ss