[Recommended collection] Webpack 4+ collection of excellent learning materials

background

Recently, I was studying the Webpack source code, and I output 6 articles about principle analysis and tool sharing. In the process, I found some high-quality and worthwhile learning materials, so I stayed up late to organize a wave, I hope it will be helpful to everyone.

The rules for inclusion are simple:

• Content applies to Webpack 4 and above
• Regardless of the number of likes and readings, the length can be very short, but the content must be detailed and there should be no obvious errors
• Do not seek for quantity but for completeness, but seek to cover the dimensions of applications, principles, tools, etc., which can bring new knowledge to students at all levels

I will continue to maintain this list in the future, and I very much welcome friends from the community to contribute to my personal public account tecvan.

Webpack basics

Use Webpack to develop web applications

• Introduction | Webpack Chinese Guide : A more basic and detailed introductory tutorial, very suitable for beginners
• 2020, and the code won’t be fragrant if you don’t use webpack again (nearly ten thousand characters) : Nuggets 3000 praise, very detailed application guide, especially the final performance optimization piece has a strong practical guiding significance
• 30 steps of webpack4 to create an optimized react development environment, as : Introduce all aspects of Webpack + React development environment construction, readers are recommended to follow the picture
• How to use Webpack with React: an in-depth tutorial
• webpack-contrib/awesome-webpack
• petehunt/webpack-howto
• Webpack tutorial for beginners Part 1-Introduction to
• A mostly complete guide to webpack 5 (2020)

Use Webpack to write npm packages

• Let's Write a JavaScript Library in ES6 using Webpack and Babel
• Modern front-end library development guide series (2): Use webpack to build a library
• [Translation] Based on Webpack and ES6 to create a JavaScript class library

Use scaffolding

• facebook/create-react-app : Quickly create a scaffolding tool for React applications
• vuejs/vue-cli : Quickly create a scaffolding tool for Vue applications
• tjx666/awesome-chrome-extension-boilerplate : Chrome extension development template based on React \& TypeScript \& Webpack

Hello World

• Webpack Examples : Webpack official examples, covering the usage of most features
• /webpack-demos : Teacher Ruan Yifeng's Webpack introductory example

Webpack advanced

Advanced features

• Tree Shaking

  • Webpack 4 Tree Shaking Ultimate Optimization Guide
  • Tree-Shaking Performance Optimization Practice-Principles
  • Tree-Shaking Performance Optimization Practice-Practice

• Cache

  • Webpack5 built-in caching solution exploration

• Module Federation

  • webpack 5 ModuleFederationPlugin vue project first experience

How to write Loader

• ✏️ loader knowledge sharing : Explained the application, type, principle, execution method and other content of loader, high quality
• [Advanced Webpack] Loader in-depth analysis : Although there are not many reads and likes, the content is detailed and worth a look
• teach you hand-in-hand with a Webpack Loader
• How to develop a Webpack Loader (1)

How to write Plugin

• Webpack case-vue-loader principle analysis : combined with vue-loader, example analysis of how to write Webpack plug-ins, especially analysis of how vue-loader parses three kinds of content in SFC; how to reuse other Loaders in Webpack configuration
• How to write a webpack plugin (1)

Realization principle

• [Summary of 4D characters] One article thoroughly understands the core principles of
• understand the principle of webpack, handwriting a 100-line webpack
• Webpack HMR principle analysis : Knowing the high praise, very detailed Hot Module Replace principle analysis document
• AST and front-end engineering practice

Interview

• "Hematemesis Finishing" Let's have another dozen Webpack interview questions : Nuggets are very praised, explain the various knowledge points in Webpack from the perspective of interview questions
• Webpack interview questions
• The 5 most confusing knowledge points in : Explain some commonly used but easily overlooked configuration items of Webpack, which are very inspiring for interviews and daily applications

Series serialization

• Fan -source code analysis Webpack (private goods)

  • [Summary of 4D characters] One article thoroughly understands the core principles of
  • [Source code interpretation] In-depth explanation of
  • Ten minutes to refine Webpack: module.issuer attribute detailed
  • bit difficult webpack knowledge point: Dependency Graph in-depth analysis
  • bit difficult knowledge point: Detailed explanation of
  • Share a few useful analysis tools for
• simple way : It should be the most detailed Webpack book in China, from introduction to application, to principles and tools, it is very worth starting
• Webpack 5 Knowledge System : An online knowledge graph that disassembles the core principles, architecture, compilation process, loader, and plug-ins of Webpack
• essay list page 6-Scholar Xiaolong-Blog Park : A series of Webpack source code analysis articles, each article is aimed at a very small point in the source code
• Webpack Book from SurviveJS : An online book with in-depth explanations of Webpack applications, principles, tools and other topics
• most interesting webpack4.0 intermediate tutorial in history-things you should know beyond configuration

• Liu -Take you to deeply unlock the Webpack series

  • takes you to deeply unlock the Webpack series (basic)
  • takes you to deeply unlock the Webpack series (advanced article)
  • takes you to deeply unlock the Webpack series (optimization)

• Didi Front-end Technical Team -A series of articles on the principle analysis of hard-core Webpack, you have to calm down and read it slowly

  • Webpack static file generation process you don't know
  • webpack series seven-file generation
  • webpack series 7-with dependencyTemplates
  • webpack series six chunk map generation
  • webpack series fifth module generation 1
  • webpack series four loader detailed 1
  • webpack series three resolve
  • webpack series 2 Tapable
  • Overview of one of the webpack series

Performance optimization

• Web Performance Optimization with Webpack
• Webpack 4: mode and optimization
• The 100\% correct way to split your chunks with Webpack
• iamakulov/awesome-webpack-perf
• Webpack build performance optimization exploration
• development tool experience: how to improve your Webpack construction efficiency by 10 times
• webpack Performance: The Comprehensive Guide
• completely solve the problem of slow Webpack packaging
• Webpack build performance optimization strategy summary
• completely solve the problem of webpack package file size is too large : This article introduces 5 common package size optimization methods, the text is particularly clear
• Play with webpack and increase your packing speed by 90\%
• ESM vs Webpack Exploration for high-performance construction