webpack-studying

为前端圈提供一点贡献

入门

• 1.常用的Plugins
• 2.常用Loaders
• 3.构建是什么，为什么需要构建，以及常见构建工具的介绍和对比
• 4.把 Webpack 正常运行起来
• 5.使用 Webpack 的 Loader 功能加载 CSS
• 6.使用 Webpack 的 Plugin 功能提取 CSS
• 7.使用 DevServer 提升开发体验
• 8.核心概念

配置

• 9.Entry配置模块的入口
• 10.Output配置如何输出最终想要的代码
• 11.Module配置处理模块的规则
• 12.Resolve配置寻找模块的规则
• 13.Plugins配置扩展插件
• 14.DevServer配置DevServer
• 15.其它配置项
• 16.整体配置结构
• 17.多种配置类型
• 18.配置总结

使用

• 19.使用新语言来开发项目-使用ES6语言
• 20.使用新语言来开发项目-使用TypeScript语言
• 21.使用新语言来开发项目-使用Flow检查器
• 22.使用新语言来开发项目-使用SCSS语言
• 23.使用新语言来开发项目-使用PostCSS
• 24.使用新框架来开发项目-使用React框架
• 25.使用新框架来开发项目-使用Vue框架
• 26.使用新框架来开发项目-使用Angular2框架
• 27.用 Webpack 构建单页应用-为单页应用生成HTML
• 28.用 Webpack 构建单页应用-管理多个单页应用
• 29.用 Webpack 构建不同运行环境的项目-构建同构应用
• 30.用 Webpack 构建不同运行环境的项目-构建Electron应用
• 31.用 Webpack 构建不同运行环境的项目-构建Npm模块
• 32.用 Webpack 构建不同运行环境的项目-构建离线应用
• 33.Webpack 结合其它工具搭配使用-搭建Npm Script
• 34.Webpack 结合其它工具搭配使用-检查代码
• 35.Webpack 结合其它工具搭配使用-通过Node.js API 启动 Webpack
• 36.Webpack 结合其它工具搭配使用-使用 Webpack Dev Middleware
• 37.用 Webpack 加载特殊类型的资源-加载图片
• 38.用 Webpack 加载特殊类型的资源-加载SVG
• 39.用 Webpack 加载特殊类型的资源-加载Source Map

原理

• 40.Webpack-工作原理
• 41.Webpack-输出文件分析
• 42.Webpack-编写Loader
• 43.Webpack-编写Plugin
• 44.Webpack-调试Webpack

优化

• 45.优化构建速度-缩小文件搜索范围
• 46.优化构建速度-使用DllPlugin
• 47.优化构建速度-使用HappyPack
• 48.优化构建速度-使用ParallelUglifyPlugin
• 49.优化使用体验-使用自动刷新
• 50.优化使用体验-开启模块热替换
• 51.减少用户能感知到的加载时间-区分环境
• 52.减少用户能感知到的加载时间-压缩代码
• 53.减少用户能感知到的加载时间-CDN加速
• 54.减少用户能感知到的加载时间-使用Tree Shaking
• 55.减少用户能感知到的加载时间-提取公共代码
• 56.减少用户能感知到的加载时间-按需加载
• 57.提升流畅度-使用Prepack
• 58.提升流畅度-使用Scope Hoisting