So erstellen Sie mit webpack4 ein Reaktionsprojekt-Framework

Dieser Artikel stellt hauptsächlich die Verwendung von Webpack4 zum Erstellen eines Reaktionsprojekt-Frameworks vor. Jetzt kann ich ihn mit Ihnen teilen

Einführung

Framework-Einführung, eine reagierende Einzelseitenanwendung, die mit webpac erstellt und in antd integriert wurde. Verwenden Sie webpack-dev-server, um lokale Dienste zu starten und Hot-Updates hinzuzufügen, um die Entwicklung und das Debuggen zu erleichtern. Verwenden Sie den Bundle-Loader zum Codeschneiden und verzögerten Laden.
Manuell erstellt, ohne CLI zu verwenden. Eine große Anzahl von Kommentaren eignet sich für Anfänger, um Webpack zu verstehen und zu lernen und ein tiefes Verständnis für Reaktionsprojekte zu haben

Start

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

Verpackung

  yarn build

Verzeichnisstruktur

  +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 Lazy Loading verwendet

  // 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></loadover> : <p>加载动画</p>
      )
    }
  }
  export default LazyLoad

  // 通过封装的懒加载组件过度 增加加载动画
  <lazyload></lazyload>

Routenkonfiguration

Das Framework ist Aufgeteilt nach Modulen, und unter dem Ordner „pages“ befindet sich ein Modul Der gesamte Inhalt dieses Artikels wird für das Lernen aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So verwenden Sie D3.js zum Implementieren einer Topologiekarte

So fügen Sie einen dynamischen Browser hinzu ein Vue-Projekt Problem mit Header-Titel

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit webpack4 ein Reaktionsprojekt-Framework. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!