The introduction

Create-react-app create-React-app is a quick build tool for The React application published by Facebook. It mainly uses Node and Webpack as the core tools. Why did we choose create-React-app as the scaffolding for our team project? There are several reasons for this:

  1. Create-react-app is a facebook scaffolding with high quality, timely maintenance and update, mature community, and timely issue resolution
  2. The basic function is comprehensive, basically meets the demand, opens and uses
  3. Node, Webpack are the main development tools, friendly to front-end development
  4. React-scripts is the main directory for secondary development in Packages

Here is the secondary development of the scaffolding source create-react-app-v2.1.8

1. The working principle of scaffolding

  • new commander
  • install react-scripts
  • node init.js
  • copy template

2. Why did we upgrade from V1.1.5 to V2.1.8

  • The new version supports additional local templates, which enables us to create multiple templates without having to install new global commands globally
  • Redefine our multi-entry development model to bring new development experience and improve development efficiency
  • The new version supports typesrcipts
  • The new version of the code is more streamlined and easier to manage, which is one of the advantages of WebPack4. There is no need to define development mode and production mode configuration files.
  • webpack3 -> webpack4

3. New webpack4 features

  • Zero configuration (in fact, many default configuration items are added, so that we can use them directly when we do not need to configure the config file, such as default entry, output,mode)
  • Discard CommonsChunkPlugin, UglifyJsPlugin, and add configuration item Optimization. This feature is very powerful and will be explained later in 4
  • extract-text-webpack-plugin ->mini-css-extract-plugin
  • Increased packing rate (180%)
  • browserslist

4. Read our WebPack configuration file

  • PNP YARN new module loading mode
  • WorkboxWebpackPlugin applies PWA generation solution offline
  • cssnano css tree shaking
  • Vw, VH adaptation scheme
  • Code split, code lazy loading
  • Multiple entry configuration

5. What optimizations did we make in the secondary development

  • Adaptation of VW scheme
  • Added support for less
  • Enhance the proxy solution of proxy
  • Modified CSSNano scheme
  • Added SVG Sprite
  • Support for multiple entries
  • Support antD-Mobile CSS loading on demand
  • Support for decorator @
  • Remove react-app-polyfill and use custom polyfill to expand the compatible range of Babel-Polyfill
  • Custom Jinkens package command
  • Access wechat sharing, performance monitoring and other public SDK

6. Legacy issues

  • Wetime-mobile tree shaking is invalid

7.Making the address