Sort out the Webpack knowledge system and recommend learning resources

foreword

Several scattered articles have been written about Webpack before:

• Build a React project from scratch with Webpack
• Webpack Sourcemap Review
• Upgrading Webpack5 Practice
• How to write a Webpack Loader
• How to write a Webpack Plugin

The content of this article will not repeat the details of various Webpack, but will sort out the relevant knowledge of Webpack (the content may not be complete, but it can also be used as a review of Webpack), and recommend some articles from the big guys that I have read for reference. Learn to read the reference, I hope it will help you to learn more about Webpack.

This article sorts out the Webpack knowledge system from the three perspectives of Webpack foundation, optimization, and principle. The following is a mind map of the Webpack knowledge system I compiled:

This article will also be synced to my Github

Webpack Core Basics

Not to mention the basics of Webpack

Project configuration

• Build a React project from scratch with Webpack
• Take you to deeply unlock the Webpack series (basic)

Loader

What is Loader

Loader usually refers to the packaging scheme , which is to give webpack the ability to load and parse non-JavaScript files

• Loader knowledge sharing : a comprehensive introduction to Loader

Common Loaders

• babel-loader: Convert ES6+ syntax to ES5 syntax
• file-loader: Output the file to a specified directory, and refer to the output file through a relative URL in the code.
• url-loader: Inject the file content into the code in base64 mode when the file size is smaller than the limit
• css-loader: Load CSS, support modularization, compression, file import and other features
• style-loader: Add the processed css to the page in the form of style tags
• less-loader: Parse Less files
• sass-loader: Convert SCSS/SASS code to CSS
• postcss-loader: extends CSS syntax, for example, it can automatically complete CSS3 prefixes with the autoprefixer plugin

How to write a Loader

Loader is actually a function that obtains the source content before processing, performs processing on the original content, and returns the processed content.

• How to write a Webpack Loader : You can read my article first, a relatively simple introduction
• Webpack principle series seven: how to develop Loader : more detailed writing

About pitch loader

• The "pitch loader" application scenario you don't know

Plugin

What is a Plugin

Plugin is a function extender. The plug-in system of webpack is a strongly coupled architecture based on Tapable. It can help us do some things when webpack runs to a certain point.

Common Plugins

• html-webpack-plugin: Generate an HTML file based on an HTML template, and automatically import the packaged js into this HTML file
• terser-webpack-plugin: supports ES6 compression, and can open the parallel parameter, use multi-process compression, and speed up compression
• mini-css-extract-plugin: CSS is extracted into a separate file, supporting on-demand loading
• webpack-bundle-analyzer: Visualize the volume of Webpack output files (business components, dependencies on third-party modules)
• speed-measure-webpack-plugin: You can see the entire packaging time, the time of each Plugin and Loader

How to write a Plugin

• How to write a Webpack Plugin
• Webpack Principle Series II: Plug-in Architecture Principle and Application : Introduces the core library of Plugin - Tapable

SourceMap

This is just because I have done a summary before, so I have also singled out a large part of it.

Sourcemap is to solve the problem of inability to debug when the development code is inconsistent with the actual running code. It is the mapping of the source code and the target code error location. The keyword order of the devtool configuration items of Webpack4 and Webpack5 is a bit different, pay attention to this.

• Webpack Sourcemap Review
• In-depth Source Map

Webpack optimization

This practicality is relatively high, and various optimizations can be carried out on the project. The above mind map is not listed completely, you can go to various optimization articles for this specific.

It should be noted that some optimization methods are outdated when upgrading Webpack4 or Webpack5; secondly, upgrading Webpack5 itself is a big optimization, which is better than various optimization methods on the lower version. I hope there is no Webpack configuration engineer.

• Upgrading Webpack5 Practice
• Take you to unlock the Webpack series in depth (optimization)
• Webpack configuration full analysis (optimization)

Webpack principle

Webpack packaging build process

• [[Summary of 10,000 words] Understand the core principles of Webpack in one article]( https://juejin.cn/post/6949040393165996040 ): The classic principle article of Webpack boss
• "Do some hard stuff" to spy on the principle of Webpack4.x from the source code
• Analysis of the whole process of the core packaging principle of Webapck5

Webpack lazy loading

The lazy loading of webpack actually relies on ES6's import() syntax and jsonp. You can look at:

• Understand the lazy loading mechanism of webpack in one article - webpack series
• Asynchronous loading principle and subcontracting strategy of webpack
• Detailed explanation of lazy loading construction principle (how modules are formed & how to load) & source code interpretation

Hot update principle

Hot update means that when the code is modified and saved, webpack will repackage the code, and the page can be updated without refreshing the browser. This part of the principle is almost the same after reading the following three articles:

• Webpack HMR principle analysis
• Understand the principle of webpack hot update
• Easily understand the principle of webpack hot update

Tree Shaking

Tree Shaking essentially eliminates useless JS code and reduces the size of the loaded file.

Implementation prerequisites:

• The code follows the ES6 Module specification

• Set the mode option to production

  • optimization.usedExports: true
  • optimization.minimize: true

recommended article:

• How Webpack | TreeShaking works
• Webpack Principle Series Nine: Tree-Shaking Implementation Principle

Webpack5

Major changes in Webpack5:

• Use persistent caching to improve build performance.
• Improve long-term caching with better algorithms and defaults.
• Better Tree Shaking and code generation to improve package size.
• Improve compatibility with web platforms.
• Without introducing any breaking changes, clean up those internals that were in a strange state when implementing v4 features.
• Trying to prepare for future features by introducing breaking changes now, staying on v5 for as long as possible.

Another important feature of Webpack5 is module federation. It is mainly for better code sharing, allowing code to be directly shared across applications using CDN. It is no longer necessary to install NPM packages locally, build and then publish them. You can read this: Modules Commonwealth Analysis

recommended article:

• After two years, webpack 5 is officially released!
• webpack5 getting started guide

Webpack system tutorial recommendation

• Hello Webpack
• The most attentive webpack4.0 intermediate tutorial in history - things you should know beyond configuration
• Proficient in the core principles of Webpack