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

この記事は主に webpack4 に基づいて React プロジェクト フレームワークを構築する方法を紹介します。内容が非常に優れているので、参考として共有します。

はじめに

フレームワークの紹介。webpac を使用して構築され、antd を統合した単一ページの反応アプリケーションです。 webpack-dev-server を使用してローカル サービスを開始し、ホット アップデートを追加して、開発とデバッグを容易にします。コードのカットと遅延読み込みにはバンドルローダーを使用します

CLIを使用せずに手動で構築されており、多数のコメントは初心者がWebpackを理解して学習し、反応プロジェクトを深く理解するのに適しています

スタートアップ

 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} />

ルーティング設定

pagesフォルダ内のRoute.jsがモジュール

reduxの使い方の紹介

reduxミドルウェアについて

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

上記はこの記事の概要です。すべての内容が皆さんの学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

React でコンポーネントを作成する 3 つの方法とその違いについて

ファイル検索範囲を絞り込むための Webpack 最適化設定の概要

以上がwebpack4 に基づいて反応プロジェクト フレームワークを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。