Skip to main content

preface

This module will lead you to understand the basic concepts and usage of Webpack5, as well as some common configuration items and plug-ins. Please upgrade the Node.js version to at least 10.13.0 and above (the latest LTS version is best).

What is Webpack?​

Webpack is a module packaging tool that can convert many modules into static resources that can be recognized by browsers according to certain rules. Webpack can package various resources (such as JavaScript, CSS, images, fonts, etc.) into static resources that meet the deployment of production environments. At the same time, it can also compress, optimize, split, and process compatibility of the code to improve the loading speed and performance of the application.

What are the current mainstream packaging tools?​

  • Webpack
  • Vite
  • Parcel
  • Rollup
  • Browserify
  • Gulp
  • Grunt

Among them, Webpack and the slowly emerging Vite have the highest market share and the best ecosystem.

Prerequisite knowledge​

  • Front-end basics
  • HTML, CSS, JavaScript
  • Front-end frameworks such as React or Vue or Angular or Svelte
  • Node.js basics
  • fs, path, os modules
Loading Comments...