Webpack + react Front-end engineering practice and temporary not extreme optimization

Technical structure

Webpack + react + react-router

Feature implementation about packaging

1. React-router-based custom packaging code split.
2. The sub-package is loaded asynchronously on demand.
3.CommonsChunkPlugin Public Code Package extraction.
4.ParallelUglifyPlugin multithreaded code compression.
5.HappyPack Multithreading loader task processing.
6.webpack Tree Shaking

Development model

1.express + webpack-dev-middleware + webpack-hot-middleware Local Development server and file modification hot load and real-time refresh.
2.mock data, Data.json interface and analog data configuration, effective in real time.
3. Nodejs-based HTTP module, to implement the local server HTTP request proxy forwarding, development mode directly request the test environment or the online Restfull API interface.

Business function Support

1. React-router-based page jump control
2. Configurable multi-level menu components
3. cookie-based permission control function
4. Client HTTP request Encapsulation
5. Introduction of Element-react, antd two common UI component libraries (common code extraction for element-react, ANTD component loading on demand)
6. Integration Less

Use instructions to install NPM dependencies

npm i --save

Development mode start (using Data.json mock data)

npm run dev

Development mode start (using proxy forwarding)

修改‘build/proxy.js‘的http option配置(hostname属性和header自定义配置)npm run dev --pxy

Production environment Packaging

‘build/config.js‘可对打包入口和输出路径做配置。npm run build

Git address: https://github.com/IveHD/web-project-go

Webpack + react Front-end engineering practice and temporary not extreme optimization