Why use Webpack?

In the last decade, with the rapid popularity of mobile phones, mobile tablets and wearable devices, front-end application scenarios have been rapidly expanded, and corresponding development methods can be described as “a hundred flowers bloom”. Therefore, it is important to do different packaging for different application scenarios. For example, for the PC side of the background application, need to support SPA packaging construction; H5 pages typically have high performance and accessibility requirements, so they need to be built to support server-side rendering and PWA offline caching.

In addition, the node.js community is extremely prosperous today (the number of NPM modules has increased to 100W +), and the BROWSER side JS code cannot directly introduce NPM templates, we need to use building tools such as Webpack, so that we can quickly “eat” those excellent and mature components. Thus improve the front-end development efficiency.

Finally, React and Vue syntax (JSX, Vuex, etc.) cannot be directly parsed in browsers and requires building tools to convert.

So, no matter which front end you go down, you can’t get around mastering build tools, and WebPack is one of the best build tools of the moment.

What can Webpack do?

From the most basic/rigid role:

  • Convert ES6 syntax
  • Syntax sugar in the transformation framework (for example, JSX syntax)
  • CSS prefix completion/preprocessing (SCSS) to improve programmability
  • Compression confusion
  • Image compression

Build tool evolution

  • The earliest front-end development, is cut graph +HTML+CSS+JS, the beginning of the code compression is required through some online tools for manual compression, this process is very cumbersome;
  • Later, as modularization became more popular, grunt was born. Grunt’s I/O operations on local disks made packaging very slow.
  • Thus, gulP is developed. Gulp uses the concept of file stream to store intermediate products in memory and read them directly when needed, thus improving the packaging speed.
  • Why did you choose Webpack?
    • The community is more active and ecologically rich
    • Flexible configuration, plug-in extensions (Loaders & Plugins)
    • Official continuous update, rapid iteration

Webpack series

  • preface
  • Extremely brief introduction
  • The core concept
  • Parse the file
  • File listening and hot update
  • File fingerprint Policy
  • Code compression
  • CSS enhancement: Autoprefixer
  • Multi-page Application Packaging Solution (MPA)