Webpack 3+ React development environment configuration

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.

1$ git clone https://github.com/MeteDesign/Webpack.git

2$ cd WebpackCopy the code

After downloading, you need to install the dependency files:

1$ yarnCopy the code

or

1$ npm installCopy the code

Remember: Before starting your project, please run itnpm run generdll, this command is used to generate DLL files to improve the compilation speed of the development environment

1$ npm run buildCopy 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.

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

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.

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.