Webpack-List
Webpack Learning & Practices List
-
2017-Webpack HMR 原理解析: Hot Module Replacement(以下简称 HMR)是 webpack 发展至今引入的最令人兴奋的特性之一。
Resource | 资源
Book | 书籍
-
SurviveJS Webpack》📚: SurviveJS - Webpack is meant for beginner to intermediate users of webpack.
-
Practical Module Federation》📚: Module Federation is an advanced use topic for the Webpack bundler starting with version 5.
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: 模块化
- 2017-Brief introduction to scope hoisting in Webpack: On its third major release, Webpack introduced a new feature: scope hoisting. Many developers are already exposing data showing great positive impacts on the initial execution time of their bundles.
Build Performance: 构建性能优化
-
2016-Optimizing Webpack build times and improving caching with DLL bundles
-
Keep webpack Fast: A Field Guide for Better Build Performance: This post is a field guide offering up what we learned on our path towards a faster build.
-
HappyPack : HappyPack makes webpack builds faster by allowing you to transform multiple files in parallel.
-
AutoDllPlugin : Webpack’s DllPlugin without the boilerplate.
-
HardSourceWebpackPlugin : HardSourceWebpackPlugin is a plugin for webpack to provide an intermediate caching step for modules.
-
parallel-webpack : Builds multi-config webpack projects in parallel.
Production | 发布到生产环境
-
2017-Reducing CSS bundle size 70% by cutting the class names and using scope isolation
-
2017-webpack for real tasks: bundling front-end and adding compilation #Series#: Bundling front-end and adding compilation ,Decreasing front-end size and improving caching, Speeding up build and improving the development workflow
-
Web Performance Optimization with Webpack by Addy Osmani: Taking advantage of its features for optimizing modern code, code-splitting scripts into critical and non-critical pieces and stripping out unused code.
Code Split | 代码分割
-
2017-webpack bits: Getting the most out of the CommonsChunkPlugin():
-
2017-How to use Webpack’s new “magic comment” feature with React Universal Component + SSR: Webpack 2.4.0, which came out a few weeks ago, launched with a very interesting new feature: “magic comments.” In combination with dynamic imports, “magic comments” greatly simplify code-splitting + server-side rendering.
-
2018-RIP CommonsChunkPlugin: webpack 4 removes the CommonsChunkPlugin in favor of two new options (optimization.splitChunks and optimization.runtimeChunk). Here is how it works.
OpenSource
- 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
Internals
-
2019-Webpack 是怎样运行的?: 下面我们来通过一个简单的项目来看一下 Webpack 是怎样运行的。