Write NPM packages using Webpack

• Let’s Write a JavaScript Library in ES6 using Webpack and Babel
• Modern Front-end Library Development Guide Series ii: Build a library with WebPack
• Build JavaScript libraries based on Webpack and ES6

Use scaffolding

• Facebook /create-react-app: Quickly create the React application scaffolding tool
• Vuejs/VUE-CLI: Quickly create vUE application scaffolding tool
• Tjx666 /awesome-chrome-extension-boilerplate: a chrome extension development template based on React & TypeScript & Webpack

Hello World

• Webpack Examples: Official Webpack Examples that cover the use of most features
• Ruanyf/Webpack-Demos: Teacher Ruan Yifeng’s introduction to Webpack example

Webpack advanced

How to write a Loader

• ✏️ Loader knowledge sharing: Introduces loader applications, types, working principles, and execution modes
• 【Webpack advanced 】Loader in-depth analysis: although the reading and praise are not much, but the content is detailed, worth a look
• Hand by hand teach you a Webpack Loader
• How to develop a Webpack Loader

How to write a Plugin

• Webpack case – Vue-Loader principle analysis: combined with vue-Loader, the example analysis how to write Webpack plug-in, especially the analysis of vue-Loader how to parse a SFC three kinds of content; How do I reuse other Loaders in a Webpack configuration

• How to Write a WebPack plugin

Realize the principle of

• [10,000 words summary] One article thoroughly understand the core principle of Webpack
• Understand webpack principles and write a 100-line Webpack by hand
• Webpack HMR principle analysis: Hot Module Replace principle analysis document in detail
• AST and front-end engineering practice

The interview

• A dozen more Webpack interview questions: Dig gold high praise, from the perspective of interview questions to explain the various points of knowledge in Webpack
• Webpack interview questions
• The five most confusing points in WebPack: Explain some common but often overlooked configuration items of WebPack, which is very enlightening for interview and everyday application

A series of serial

• Wen-jie fan- Source code parsing Webpack(private)
  • [10,000 words summary] One article thoroughly understand the core principle of Webpack
  • Webpack plug-in architecture in-depth explanation
  • 10 minutes introduction to Webpack: module.issuer properties
  • Dependency Graph: Dependency Graph (Dependency Graph
  • The Webpack Chunk subcontracting rules
  • Share several Webpack utility analysis tools

• Simple Webpack: should be the most detailed domestic Webpack books, from the introduction to the application, and then to the principle, tools have been introduced, is very worth starting
• Webpack 5 Knowledge Body: an online knowledge map that disassembs the core principles, architecture, compilation process, loader, and plug-ins of Webpack
• A series of Webpack source analysis articles, each article is aimed at a particular small point of the source expansion
• Webpack Book from SurviveJS: an in-depth online Book on Webpack applications, principles, tools, and more
• Webpack4.0 intermediate tutorial — what you should know beyond configuration
• Liu Xiaoxi- Take you deep unlock Webpack series
  • Deep Unlock Webpack series (Basics)
  • Deep Unlock Webpack series (Advanced)
  • Unlock the Webpack series in depth
• Didi front-end technology team- more hardcore Webpack principle analysis series of articles, have to calm down to slowly look
  • You don’t know webpack static file generation process
  • Webpack series 7 – File generation
  • Webpack series 7 – With dependencyTemplates
  • Webpack series of six chunk map generation
  • The five modules in the Webpack series generate 1
  • Webpack series four loader details 1
  • Resolve, the third in the Webpack series
  • The second Tapable in the Webpack series
  • An overview 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 tips: How to increase your Webpack build efficiency by 10 times
• webpack Performance: The Comprehensive Guide
• Solve Webpack slow packaging problem completely
• Webpack builds a summary of performance optimization strategies
• Complete solution to webpack file size: this article introduces 5 common package size optimization methods, especially clear
• Play with Webpack and increase your packing speed by 90%
• ESM vs Webpack exploration for high performance builds