Based on WebPack 3.x + React V16 + ANTDesign

X + React V16 + AntDesign

instructions

This article is suitable for students who are new to React or Webpack. The purpose is to reduce the time spent learning how to configure webPack development environment.

Learning a new development mode is technically difficult for students who are not very skilled, especially in the configuration of some complex development environment. Beginners should focus more on learning the new technology stack, rather than investing a lot of time and energy in tools. Therefore, I configured a complete React development configuration based on my own development experience, hoping to provide a comfortable environment for students. When you have the ability to configure a complete development environment, it is best to go back and configure your own development environment.

The development environment uses the following products:

  • webpack 3.x
  • React (Version unlimited)
  • Ant Design is a UI library developed by Ant Financial based on React.

The configuration address

https://github.com/MeteDesign/Webpack

The library has two branches, master and AntDesign. The differences are explained in the branch description section below.

The installation

$ git clone https://github.com/MeteDesign/Webpack.git
$ cd Webpack
Copy the code

After downloading, you need to install the dependency files:

$ yarn
Copy the code

or

$ npm install
Copy the code

** Remember: Before starting your project, please run NPM run generDLL. This command is used to generate DLL files to improve the compilation speed of your development environment **

The development environment

$ npm run dev
Copy the code

The production environment

$ npm run build
Copy the code

After running this command, you will see a dist folder in your root directory, which you can place on your server if you need to deploy.

Branch instructions

master

This branch is a relatively basic React development environment with a relatively simple project architecture. It is suitable for beginners to use.

instructions

When you run NPM run Dev and type localhost:4000 into your browser, if you see something like the following, congratulations and you can continue your learning journey. If any error is reported, please report to me in the form of issues, and I will reply to you as soon as possible.

features

With this configuration, you can use the following features

  • Public chunk extraction
  • DLL support
  • Extract CSS into a single file
  • Multi-entry file support
  • Hot replacement support
  • Long-term cache support
  • Postcss support
  • Sass/LESS/CSS CSS preprocessor support
  • Compression optimized code support
  • .

Check out webpack.config.js for more features.

antdesign

This branch ADAPTS ant Design UI library, is a relatively complete development environment, the project structure is basically perfect, suitable for students who have already started, want some higher level adjustment.

instructions

When you run NPM run Dev and type localhost:4000 into your browser, if you see something like the following, congratulations and you can continue your learning journey. If any error is reported, please report to me in the form of issues, and I will reply to you as soon as possible.

When you enter localhost: 4000 / login. HTML, you will see the login page as shown below, also if there is wrong, please ask me free.

This configuration file uses multiple entry files, main and login respectively. If you have used Ant-Design-Pro, you will find that the styles are very similar. When building the project, I referred to the design style of Ant-Design-Pro. But in the sidebar section, I added code so that the sidebar doesn’t change as the page slides.

features

In this configuration, you can use the following features:

  • Public chunk extraction
  • DLL support
  • Lazy loading support
  • Extract CSS into a single file
  • Multi-entry file support
  • Hot replacement support
  • Long-term cache support
  • Postcss support
  • Sass/LESS/CSS CSS preprocessor support
  • Compression optimized code support
  • .

Check out webpack.config.js for more features. Please add your routing file as shown in commom/nav.js to implement lazy loading.

I hope we can point out the criticism and encourage each other.