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 サイトの他の関連記事を参照してください。