四大维度解锁 Webpack 前端工程化

第1章 课程简介
讲述课程背景,从前端开发的变化 到 前端工具的发展变化,介绍了课程内容,课程安排。
1-1 课程背景
1-2 导学

第2章 学习准备
讲述模块化开发的思想、学习环境准备,webpack 的概况,版本更迭,核心概念等,为开始实践学习webpack 做准备。
2-1 学习准备 - 模块化(1)
2-2 学习准备 - 模块化(2)
2-3 学习准备 - 环境准备(mac)
2-4 学习准备 - webpack 简介
2-5 学习准备 - webpack 核心概念

第3章 由浅入深Webpack(1)
由一个个的实例组成,介绍webpack 在处理各种实例的下的配置,实例包括 Typescript Ecmascript Less 语言的预编译,讲解了 Webpack 提取公共代码、代码分割、动态import、魔法注释、JS 和 CSS 的 TreeShaking等新特性。
3-1 由浅入深 webpack - 使用 webpack
3-2 由浅入深 webpack - 打包 JS
3-3 由浅入深 webpack - 编译 ES6
3-4 由浅入深 webpack - 编译 typescript
3-5 由浅入深 webpack - 打包公共代码(1)
3-6 由浅入深 webpack - 打包公共代码(2)
3-7 由浅入深 webpack - 代码分割和懒加载(1)
3-8 由浅入深 webpack - 代码分割和懒加载(2)
3-9 由浅入深 webpack - 处理 CSS - style-loader(1)
3-10 由浅入深 webpack - 处理 CSS - style-loader(2)
3-11 由浅入深 webpack - 处理 CSS - CSS-Loader
3-12 由浅入深 webpack - 处理 CSS - 配置 Less - Sass
3-13 由浅入深 webpack - 处理 CSS - 提取 CSS
3-14 由浅入深 webpack - PostCSS-in-webpack
3-15 由浅入深 webpack - Tree-shaking - JS Tree-shaking
3-16 由浅入深 webpack - Tree-shaking - CSS Tree-shaking

第4章 由浅入深Webpack(2)
图片的压缩、CSS 雪碧图、PostCSS 的使用、HTML 的生成等。
4-1 文件处理(1)- 图片处理 - CSS中引入图片、Base64编码
4-2 文件处理(2)- 图片处理 - 压缩图片、自动合成雪碧图sprite、retina处理
4-3 文件处理(3)- 处理字体文件
4-4 文件处理(4)- 处理第三方 JS 库(providePlugin、imports-loader)
4-5 html in webpack(1) - 生成 HTML
4-6 html in webpack(2) - HTML 中引入图片
4-7 html in webpack(3) - 配合优化

第5章 Webpack 环境配置
介绍如何搭建 Webpack 本地开发环境,配置模块热更新、如何通过SourceMap调试代码、通过代码检查工具提高代码质量。
5-1 开发环境 - Webpack Watch Mode
5-2 开发环境 - Webpack Dev Server - 本地 rewrite 规则-
5-3 开发环境 - 代理远程接口
5-4 开发环境 - 模块热更新
5-5 开发环境 - 开启调试SourceMap
5-6 开发环境 - 设置 ESLint 检查代码格式
5-7 开发环境 - 区分开发环境 和 生产环境(1)
5-8 开发环境 - 区分开发环境 和 生产环境(2)
5-9 开发环境 - 使用 middleware 来搭建开发环境

第6章 Webpack 实战场景
介绍Webpack 打包分析工具,如果使用webpack 长缓存优化,如何提升打包速度。
6-1 Webpack实战场景 - 分析打包结果
6-2 webpack 实战场景 - 优化打包速度(1)
6-3 webpack 实战场景 - 优化打包速度(2)
6-4 webpack 实战场景 - 长缓存优化
6-5 webpack 实战场景 - webpack 多页面应用(1)
6-6 webpack 实战场景 - webpack 多页面应用(2)

第7章 Webpack 和 Vue
介绍Webpack 和 Vue 的结合,Vue-cli 的模版介绍,以及模版中的各项配置。
7-1 Vue 和 webpack - Vue-cli 介绍
7-2 Vue 和 webpack - Webpack template
7-3 vue 和 webpack - 开发配置(1)
7-4 vue 和 webpack - 开发配置(2)
7-5 vue 和 webpack - 实现简单 todolist(1)
7-6 vue 和 webpack - 实现简单 todolist(2)

第8章 Webpack 和 React
介绍Webpack 和 React 的结合,介绍官方脚手架 Create-React-App 以及各种配置。
8-1 React 和 webpack - create-react-app 介绍
8-2 React 和 webpack - create-react-app 运行脚本介绍
8-3 React 和 Webpack - create-react-app 配置
8-4 React 和 Webpack - 自定义配置

第9章 Webpack 和 Angular
介绍 Webpack 和 Angular的结合,介绍官方命令行工具 Angular-cli,以及如何自定义配置。
9-1 Angular 和 webpack - Angular - cli 介绍
9-2 Angular 和 webpack - 模块热更新 和 自定义配置

第10章 课程总结
webpack相关面试技术讲解。
10-1 课程总结 - webpack 面试常见问题
10-2 课程总结 - 课程回顾和总结

第11章 Webpack 4更新
针对Webpack3.x与4.x差异,讲解了一些比较基础的差异:默认配置、mode、Tree Shaking 和 代码切分
11-1 Webpack 4 默认配置 和 mode
11-2 Webpack 4 优化、Tree Shaking 和 代码切分(1)
11-3 Webpack 4 优化、Tree Shaking 和 代码切分(2)

下载地址:百度网盘下载

原文地址:https://www.cnblogs.com/cybk/p/9744044.html

时间: 2024-11-06 18:43:08

四大维度解锁 Webpack 前端工程化的相关文章

四大维度解锁 Webpack 3.0 前端工程化

百度网盘下载 第1章 课程简介 讲述课程背景,从前端开发的变化 到 前端工具的发展变化,介绍了课程内容,课程安排. 第2章 学习准备 讲述模块化开发的思想.学习环境准备,webpack 的概况,版本更迭,核心概念等,为开始实践学习webpack 做准备. 第3章 由浅入深Webpack(1) 由一个个的实例组成,介绍webpack 在处理各种实例的下的配置,实例包括 Typescript Ecmascript Less 语言的预编译,讲解了 Webpack 提取公共代码.代码分割.动态impor

四大维度解锁Webpack3.0前端工程化

四大维度解锁Webpack3.0前端工程化网盘地址:https://pan.baidu.com/s/1NBzFqMELoFxxvFtxp0YluQ 密码: pd36备用地址(腾讯微云):https://share.weiyun.com/50QY3pp 密码:d4uwwj 第1章 课程简介讲述课程背景,从前端开发的变化 到 前端工具的发展变化,介绍了课程内容,课程安排. 第2章 学习准备讲述模块化开发的思想.学习环境准备,webpack 的概况,版本更迭,核心概念等,为开始实践学习webpack

四大维度解锁Webpack3.0工具全技能视频 Webpack教程

第1章 课程简介 讲述课程背景,从前端开发的变化 到 前端工具的发展变化,介绍了课程内容,课程安排. 第2章 学习准备 讲述模块化开发的思想.学习环境准备,webpack 的概况,版本更迭,核心概念等,为开始实践学习webpack 做准备. 第3章 由浅入深Webpack(1) 由一个个的实例组成,介绍webpack 在处理各种实例的下的配置,实例包括 Typescript Ecmascript Less 语言的预编译,讲解了 Webpack 提取公共代码.代码分割.动态import.魔法注释.

四大维度解锁Webpack3.0工具全技能

第1章 课程简介讲述课程背景,从前端开发的变化 到 前端工具的发展变化,介绍了课程内容,课程安排. 第2章 学习准备讲述模块化开发的思想.学习环境准备,webpack 的概况,版本更迭,核心概念等,为开始实践学习webpack 做准备. 第3章 由浅入深Webpack(1)由一个个的实例组成,介绍webpack 在处理各种实例的下的配置,实例包括 Typescript Ecmascript Less 语言的预编译,讲解了 Webpack 提取公共代码.代码分割.动态import.魔法注释.JS

webpack前端工程化构建工具的使用

一.模块打包机 1.创建文件 在目标文件下建立一个src文件夹作为js代码区:作为例子,我创建了两个js文件,并利用commonJS规范require引入到index.js中: moduleA.js: module.exports={ name:"MoudleA", getName:function(){ return "我是AAA模块" } } moduleB.js: module.exports={ name:"MoudleB", getNa

58到家周俊鹏:webpack PK fis,实现前端工程化我更喜欢前者

责编:陈秋歌,关注前端开发领域,寻求报道或者投稿请发邮件chenqg#csdn.net. 欢迎加入"CSDN前端开发者"微信群,参与热点.难点技术交流.请加群主微信「Rachel_qg」,申请入群,务必注明「公司+职位」.另可申请加入CSDN前端开发QQ群:465281214. 2016年,SDCC(中国软件开发者大会)相继走进了上海.深圳.成都.杭州各地.11月18日-20日将在北京完美收官.作为大会的重要分专题,前端开发专题已邀请到58到家高级前端工程师周俊鹏担任大会讲师,现场将分

[转]基于gulp和webpack的前端工程化

本文样例代码 :https://github.com/demohi/learning-gulp 本文主要简单介绍一下基于gulp和webpack的前端工程化. 技术栈 React.js reFlux Node.js 我们的需求 基于CommonJS模块化开发 基于React.js的组件化开发(JSX) 为保证组件的复用,css需要打包到js中 有国际化需求,静态文件需要部署在CDN上面 工程化工具的选择 gulp(基于stream的构建工具,与grunt相比,速度快且可编程) webpack(前

论前端工程化

在不知道什么时候,突然有人提起前端工程化这东西,一开始觉得又是某个大神故意提起的高深词汇,专门来吓唬人的. 继而我疯狂查找了很多的资料,在接近二十篇的相关资料,每一篇文章都写得神乎其神,大有唯我独尊的意味,但每篇看下来,总感觉不对经--就是大家都把自己一套比较规范的开发套路充当出前端工程化,前端工程化变成了前端优化,让人看了,"对啊,这样做规范多了,优化不错啊,巴拉巴拉",但又觉得工程化不应该只是这些,像缺什么,让人看得云里雾里,似懂非懂.这种文章虽不算误人子弟,但讳莫如深,妖魔化了前

前端工程化(摘抄)

目前来说,Web业务日益复杂化和多元化,前端开发已经由以WebPage模式为主转变为以WebApp模式为主了.现在随便找个前端项目,都已经不是过去的拼个页面+搞几个jQuery插件就能完成的了.工程复杂了就会产生许多问题,比如:如何进行高效的多人协作?如何保证项目的可维护性?如何提高项目的开发质量?... 前端工程化是前端架构中重要的一环,就是为了解决上述各种效率方面的问题的.而前端工程本质上是软件工程的一种,因此我们应该从软件工程的角度来研究前端工程. 那么前端工程化需要考虑哪些因素?我认为前