Webpack Learning & Practices List

Resource | 资源

Book | 书籍

Tutorial | 教程

  • 2016-Getting Started with Webpack 2: At its simplest, webpack is a module bundler for your JavaScript. However, since its release it’s evolved into a manager of all your front-end code.

  • 2017-Intro To Webpack: Webpack is a very complex tool, and most people do not need to know how every part of it works.

  • 2017-How to setup Webpack +2.0 from scratch in 2017 #Series#

  • 2017-Webpack: A Detailed Introduction: JavaScript module bundling has been around for a while. RequireJS had its first commits in 2009, then Browserify made its debut, and since then several other bundlers have spawned across the Internet. Among that group, webpack has jumped out as one of the best. If you’re not familiar with it, I hope this article will get you started with this powerful tool.

  • WEBPACK - THE GOOD PARTS: What is Webpack, Developing, Building, Assets, Bundle/code Splitting, Analysis, Optimizing.

  • 2018-Webpack Basics: Many people seem to like Webpack and use it for their everyday web bundling process.

Configuration: 基础配置

Modularity: 模块化

Build Performance: 构建性能优化

Production | 发布到生产环境

Code Split | 代码分割


  • 2018-size-plugin : Prints the gzipped sizes of your webpack assets and the changes since the last build.


  • Webpack Dashboard : A CLI dashboard for webpack dev server. 如果是 Windows 下的开发者可以优先使用 electron-webpack-dashboard

  • Webpack Monitor : A tool for monitoring webpack optimization metrics through the development process

  • JARVIS : J.A.R.V.I.S. (Just A Rather Very Intelligent System) will put in your browser all the relevant information you need from your webpack build whether in dev or in prod.

  • Webpack Bundle Analyzer : Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap.


  • preload-webpack-plugin: A Webpack plugin for wiring up link <rel='preload'> (and prefetch) - supports async chunks