aaronkingdom / webpackstudydemo

Webpack learning journal and awesome resources.

.
├── 1-begin
│   ├── 1.1-what
│   ├── 1.2-why
│   ├── 1.3-getting-started
│   ├── 1.4-getting-serious
├── 2-module
│   ├── 2.1-commonjs
│   ├── 2.2-amd
│   ├── 2.3-label
│   ├── 2.4-commonjs-vs-amd
│   ├── 2.5-advanced
│   ├── 2.6-deprecated
├── 3-setting
│   ├── 3.1-usage
│   ├── 3.2-context
│   ├── 3.3-entry
│   ├── 3.4-output
│   ├── 3.5-resolve
│   ├── 3.6-loader
│   ├── 3.7-plugin
│   ├── 3.8-devtool
│   ├── 3.9-others
├── 4-loader
│   ├── 4.1-introduction
│   ├── 4.2-usage
│   ├── 4.3-custom
│   ├── 4.4-list-of-loader
│   ├── 4.5-advanced
├── 5-plugin
├── 6-tools
│   ├── 6.1-webpack-dev-server
│   ├── 6.2-webpack-dev-middleware
│   └── 6.3-webpack-hot-middleware
├── 7-advanced
│   ├── 7.1-code-split
│   ├── 7.2-react-hot-loader
│   └── 7.3-build-performance

目录

• 目录
• 文档
• 社区
• 人物
• 教程
  • 入门
  • 对比
  • 集成
  • 优化
  • 代码划分
  • 热加载
  • 架构
  • 其他
• 视频
• 课程
• 书籍
• 工具
• 示例
• 模板
  • React
  • React Native
  • Angular
  • Vue
  • Others
• 常见问题
• 源码分析
• Webpack2
• 参考

文档

• 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是什么——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

##集成

• 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 构建效率

代码划分

• 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

课程

• 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 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
• 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

• Tree-shaking with webpack 2 and Babel 6
• Webpack 2 Tree Shaking Configuration
• Migrating to Webpack 2 - 21 October 2016 by Jack Franklin

参考

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