When I was developing a CRM project at the front end, due to the huge content of the project, the compilation and packaging of Webpack was very slow, which really affected the development efficiency, so I started to upgrade Webpack.

webpack4-es6-react

Webpack4-es6-react is a new front-end architecture implementation solution based on WebPack4, REact16, ES6, and ANTD-Mobile. The default is ANTD-Mobile. You can also customize the UI framework, such as ANTD

function

  • Fast compilation (use happypack plug-in to execute tasks in multiple threads)
  • Load on demand (separate compression of different page files)
  • Hash Fingerprint (Automatically adding version numbers to JS and CSS files)
  • es2015
  • Supports less and stylus
  • Image size small support base64 compression
  • Support for SVG parsing
  • Supports custom directory for packaging files
  • Support for hot updates
  • Support packaging output map files
  • Support package compressed files

Use version

  • Webpack 4.7.0
  • The react 16.4.0
  • The react – dom 16.4.0

The directory structure

. ├ ─ ─ webpack. Config -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- webpack related configuration ├ ─ ─ package. The json -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the project configuration ├ ─ ─ the README, md -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- documents └ ─ ─ the SRC -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- source directory ├ ─ ─ index -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - entry documents ├ ─ ─ Index.html -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - HTML file entrance ├ ─ ─ components -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- a business module set directory ├ ─ ─ images -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- image resource directory └ ─ ─ pages -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- page collection directory └ ─ ─ App -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - one page ├ ─ ─ App. Js ------------- page entry file ├ ─ app.css -------- page styleCopy the code

cloning

git clone https://github.com/NewPrototype/webpack4-es6-react.gitCopy the code

Install dependencies

npm install Copy the code

compile

NPM Run Start (Development mode)Copy the code

The default browser automatically opens http://localhost:9999 and the compilation is complete

packaging

NPM Run BuildCopy the code

package.json

Package. json-script parameter parsing

  • –open Opens the browser
  • –color Webpack outputs the message color
  • – hot hot update
  • — Inline hot update mode
  • – mode development (development) | | production (production mode)
  • — Profile Webpack run information

webpack.config.js

const { argv } = process; let env = 'development'; Argv. forEach(v => {if (v == 'production') {env = 'production'; }});Copy the code
Development mode
  • No map file required
  • No need to compress CSS, JS
  • Start multithreading to perform compilation tasks
Production mode
  • To generate the map
  • The compressed file
  • Automatically add hash version numbers (to resolve cache issues)
speed

  • Compilation increased from 8 seconds to around 1.5 seconds

    Hash: 7e97185183a8397d60dc
Version: webpack 4.12.0
Time: 14830ms
Built at: 2018-06-11 11:20:01Copy the code

  • The hot update speed ranges from 1 second to around 0.1 seconds

    Hash: df56e41b7815ca326b9e
Version: webpack 4.12.0
Time: 758ms
Built at: 2018-06-12 15:27:47Copy the code

todoList

  • Load routes on demand
  • Output webpack to compile JSON and analyze the compile time
  • Support for multiple entries
  • React-redux one-click template generation
  • Support axios
  • Improving webPack compilation speed (continued…)

gitHub

Github.com/NewPrototy….