zhbhun/WebpackStudyDemo

Webpack learning journal and awesome resources.

1. 介绍

2. 使用

   • 2.1. 第一个示例
   • 2.2. 模块化

3. 配置

   • 3.1. 用法
   • 3.2. 上下文
   • 3.3. 入口
   • 3.4. 输出
   • 3.5. 解析
   • 3.6. 加载器
   • 3.7. 插件
   • 3.8. 开发工具
   • 3.9. 其他

4. 加载器

   • 4.1. 介绍
   • 4.2. 用法
   • 4.3. 定制
   • 4.4. 常用加载器
   • 4.5. 进阶

5. 插件

6. 工具

7. 进阶

   • 7.1. 代码拆分
   • 7.2. 热更新
   • 7.3. 构建性能
   • 7.4. 日志
   • 7.5. api

8. FAQ

9. 衍生项目

---

文档

• Webpack 官方文档 / https://www.webpackjs.com/
• Webpack 中文指南
• Webpack 发布声明
• Webpack 博客

社区

• Gitter Chat
• StackOverflow
• Segmentfault

人物

Webpack 开发成员，以及一些 Webpack 相关值得关注的人

• Sean T. Larkin - @TheLarkInn UX for Mutual of Omaha. Developer Advocate and webpack core team member.
• Juho Vepsäläinen - @bebraw from SurviveJS and webpack core team member.
• Eric Clemmons - @ericclemmons VP of Software Development at HigherEdHQ. Webpack member.
• Patrick Stapleton - @gdi2290 from AngularClass, AngularAir and Angular Universal. Webpack member.
• Kent C. Dodds - @kentcdodds from PayPal Engineering and JavaScript Air. Webpack member.
• Johannes Ewald - @Jhnnns: Webpack core team member.
• Joshua Wiens - @d3viant0ne: Technical Lead for EasyMetrics. Webpack member.
• Jonathan Creamer - @jcreamer898: Microsoft MVP and Telerik Developer Expert.

教程

• LIST OF TUTORIALS
• Webpack on Medium
• webpack实战
• 24 个实例入门并掌握「Webpack4」(一)
• 24 个实例入门并掌握「Webpack4」(二)
• 24 个实例入门并掌握「Webpack4」(三)

入门

• Webpack是什么——Webpack入门指迷
• Webpack 怎么用 / webpack-howto
• 一小时包教会 —— webpack 入门指南
• Webpack傻瓜式指南
• 基于webpack搭建前端工程解决方案探索
• 深入浅出React（二）：React开发神器Webpack
• 基于ES6，使用React、Webpack、Babel构建模块化JavaScript应用
• WebpackTutorial
• Using React with Webpack Tutorial
• Webpack: When To Use And Why
• Beginner’s guide to Webpack

对比

• webpack到底好在哪里
• Browserify vs. Webpack
• Webpack Compared
• WEBPACK FOR BROWSERIFY USERS
• Comparison with other bundlers

集成

• gulp & webpack整合，鱼与熊掌我都要！
• 想要设计gulp & webpack构建系统？看这儿！
• Terse Webpack
• SystemJS Webpack
• Gulp Webpack Stream
• Webpack Blocks

优化

• Manually Tuning Webpack Builds
• 【前端构建】WebPack实例与前端性能优化
• Webpack 使用优化
• webpack使用优化（基本篇）
• webpack使用优化（react篇）
• React移动web极致优化
• 如何 10 倍提高你的 Webpack 构建效率
• webpack2 终极优化

代码划分

• WebPack Code splitting with ES6 and Babel 6
• How to split your apps by routes with Webpack
• Advanced WebPack Part 1 - The CommonsChunk Plugin
• Advanced WebPack Part 2 - Code Splitting
• Advanced WebPack Part 3 - Creating a custom notifier plugin

热加载

• Webpack & The Hot Module Replacement
• Webpack’s HMR & React-Hot-Loader — The Missing Manual

架构

• Creating a workflow with WebPack
• Webpack your bags
• webpack 多页应用架构系列
• webpack 单页面应用实战
• gulp + webpack 构建多页面前端项目
• webpack + gulp 构建完整前端工作流

其他

• Writing Happy Stylesheets with Webpack
• webpack-made-simple-build-es6-less-with-autorefresh-in-26-lines
• Why You Shouldn’t Style React Components With JavaScript
• Introducing react-pacomo: Automatic namespacing for className
• Learn and Debug webpack with Chrome Dev Tools!
• Adventure Time With Webpack
• Webpack and Docker for Development and Deployment

视频

• Sean Larkin NEJS Conf | 20160930 | Webpack: Core Concepts
• Front End Center Webpack from First Principles | 20160822 - Intro to Webpack
• Sean Larkin on AngularAir | 20160803 - ngAir 75 - Webpack 2 with Sean Larkin.
• Eric Clemmons chat with Kent C. Dodds | 20160701 - Webpack HMR.
• Mirko Nasato (5 Part Series) | 20160607 - Angular2 with Webpack Project Setup.
• Jonathan Creamer at Nodevember | 20151205 - Advanced WebPack.
• Kyle Robinson Young | 20150707 - Getting Started with Webpack.
• Tasveer Singh at TorontoJS Tech Talk | 201504049 - Webpack.
• Jeremy Lund at Mountain West JS | 20150315 - Gift Wrap Your Code with Webpack.
• Webpack Fundamentals
• Pete Hunt | OSCON 2014 - How Instagram.com Works
• Advanced Webpack
• 在生产环境中使用 Webpack

课程

• Intro to webpack (playlist) - Egghead.io playlist of a few videos by Kent C. Dodds (the first is free).
• Angular and Webpack for modular applications - Egghead.io course by Kent C. Dodds
• Using Webpack for Production JavaScript Applications - Egghead.io course by Kent C. Dodds (advanced)
• Webpack Fundamentals - Joe Eames for Pluralsight (intermediate)

书籍

• SurviveJS - Webpack From apprentice to master
• SurviveJS - Webpack and React: From apprentice to master
• Book of Modern frontend tooling
• react-webpack-cookbook
• 深入浅出 Webpack

工具

• Webpack Dev Middleware
• Webpack Dev Server
• Webpack Merge
• NPM Install Webpack
• Webpack Validator
• Webpack Config Utils
• Angular2 Webpack Toolkit
• Webpack Bundle Analyzer
• HJS Webpack
• react-native-webpack-server
• webpack-isomorphic-tools
• webpack-dashboard - A CLI dashboard for webpack dev server. by FormidableLabs

示例

• Webpack EXAMPLES
• ruanyf/webpack-demos

模板

React

• Create React App - Create React apps with no build configuration from Dan Abramov.
• React Starter Kit - Isomorphic web app boilerplate from Kriasoft Team.
• React Redux Universal - A starter boilerplate for a universal webapp from Erik Rasmussen.
• React Transform Boilerplate - A new Webpack boilerplate with hot reloading React components, and error handling on module and component level from Dan Abramov.
• Frontend Boilerplate - A boilerplate of things that mostly shouldn't exist from TJ Holowaychuk.
• React On Rails：Integration of React + Webpack + Rails to build Universal (Isomorphic) Apps from shakacode.
• ReactGo - Your One-Stop solution for a full-stack universal Redux from Ken Ding.
• React Native / nw / React Calculator - Mobile, desktop and website Apps with the same code from Benoit Vallon.
• React Cordova Boilerplate - TodoMVC example for React with Cordova from Yuval Saraf.
• React Universally - A starter kit giving you the minimum requirements for a production ready universal react application.
• generator-react-webpack
• react-webpack-node
• react-static-boilerplate
• ruanyf/react-babel-webpack-boilerplate - a boilerplate for React-Babel-Webpack project. 779 ★
• fullstack-react
• react-seed
• meteor-webpack-react
• shanewilson/react-webpack-example
• react-webpack-server-side-example
• react-starterkit
• koa-react-full-example

React Native

• react-native-webpack-starter-kit

Angular

• Angular2 Webpack Starter - A Webpack driven Angular 2 Starter kit from AngularClass.
• Angular Webpack - A complete, yet simple, starter for Angular using webpack
• Angular2 Seed - A simple starter demonstrating the basic concepts of Angular2 from
• Angular2 Webpack Visual Studio - ASP.NET Core, Angular2 with Webpack and Visual Studio from Damien Bod.
• Angular2 Starter - Angular2 starter kit with Typescript and Webpack from Brian Schemp.
• Angular2 SPA - Angular 2 ASP.NET Core Spa from Steve Sanderson.Pawel Kozlowski.

Vue

• vuejs-templates/webpack
• vue-webpack-example

Others

• jaketrent/html-webpack-template
• hjs-webpack
• NG6-starter
• css-modules/webpack-demo
• webpack-express-boilerplate
• geniuscarrier/webpack-boilerplate
• gaearon/library-boilerplate
• ES6 TodoMVC with Webpack - Repo used to teach webpack. (Check branches). from Kent C. Dodds.

常见问题

• [译] Webpack——令人困惑的地方 / Webpack — The Confusing Parts

源码分析

• webpack 源码解析

Webpack2

• webpack 2.2: The Final Release
• Migrating from v1 to v2
• Migrating to Webpack 2 - 21 October 2016 by Jack Franklin
• Tree-shaking with webpack 2 and Babel 6
• Webpack 2 Tree Shaking Configuration

参考

• awesome-webpack - A curated list of awesome Webpack resources, libraries and tools. by d3viant0ne.
• awesome-webpack - webpack 资料整理. by xiaoyu2er