玩转 webpack
程柳锋
腾讯高级工程师,IVWEB 团队社区和工程化负责人
27458 人已学习
新⼈⾸单¥68
课程目录
已完结/共 87 讲
加餐:webpack 5 专题内容 (3讲)
玩转 webpack
登录|注册
留言
59
收藏
沉浸
阅读
分享
手机端
回顶部
当前播放: 28 | 提取页面公共资源
00:00 / 00:00
高清
  • 高清
1.0x
  • 2.0x
  • 1.5x
  • 1.25x
  • 1.0x
  • 0.75x
  • 0.5x
网页全屏
全屏
00:00
付费课程,可试看
01 | 课程介绍
02 | 内容综述
03 | 为什么需要构建工具
04 | 前端构建演变之路
05 | 为什么选择webpack
06 | 初识webpack
07 | 环境搭建:安装webpack
08 | webpack初体验:一个最简单的例子
09 | 通过npm script运行webpack
10 | webpack核心概念之entry
11 | webpack核心概念之output
12 | webpack核心概念之loaders
13 | webpack核心概念之plugins
14 | webpack核心概念之mode
15 | 解析ECMASCript 6和React JSX
16 | 解析CSS、Less和Sass
17 | 解析图片和字体
18 | webpack中的文件监听
19 | webpack中的热更新及原理分析
20 | 文件指纹策略:chunkhash、contenthash和hash
21 | HTML 、CSS和JavaScript代码压缩
22 | 自动清理构建目录产物
23 | PostCSS插件autoprefixer自动补齐CSS3前缀
24 | 移动端CSS px自动转换成rem
25 | 静态资源内联
26 | 多页面应用打包通用方案
27 | 使用sourcemap
28 | 提取页面公共资源
29 | Tree Shaking的使用和原理分析
30 | Scope Hoisting使用和原理分析
31 | 代码分割和动态import
32 | 在webpack中使用ESLint
33 | webpack打包组件和基础库
34 | webpack实现SSR打包(上)
35 | webpack实现SSR打包(下)
36 | 优化构建时命令行的显示日志
37 | 构建异常和中断处理
38 | 构建配置包设计
39 | 功能模块设计和目录结构
40 | 使用ESLint规范构建脚本
41 | 冒烟测试介绍和实际运用
42 | 单元测试和测试覆盖率
43 | 持续集成和Travis CI
44 | 发布构建包到npm社区
45 | Git Commit规范和changelog生成
46 | 语义化版本(Semantic Versioning)规范格式
47 | 初级分析:使用webpack内置的stats
48 | 速度分析:使用speed-measure-webpack-plugin
49 | 体积分析:使用webpack-bundle-analyzer
50 | 使用高版本的webpack和Node.js
51 | 多进程/多实例构建
52 | 多进程并行压缩代码
53 | 进一步分包:预编译资源模块
54 | 充分利用缓存提升二次构建速度
55 | 缩小构建目标
56 | 使用Tree Shaking擦除无用的JavaScript和CSS
57 | 使用webpack进行图片压缩
58 | 使用动态Polyfill服务
59 | webpack启动过程分析
60 | webpack-cli源码阅读
61 | Tapable插件架构与Hooks设计
62 | Tapable是如何和webpack进行关联起来的?
63 | webpack流程篇:准备阶段
64 | webpack流程篇:模块构建和chunk生成阶段
65 | webpack流程篇:文件生成
66 | 动手编写一个简易的webpack(上)
67 | 动手编写一个简易的webpack(下)
68 | loader的链式调用与执行顺序
69 | 使用loader-runner高效进行loader的调试
70 | 更复杂的loader的开发场
71 | 实战开发一个自动合成雪碧图的loader
72 | 插件基本结构介绍
73 | 更复杂的插件开发场景
74 | 实战开发一个压缩构建资源为zip包的插件
75 | 商城技术栈选型和整体架构
76 | 商城界面UI设计与模块拆分
77 | React全家桶环境搭建
78 | 数据库实体和表结构设计
79 | 登录注册模块开发
80 | 商品模块开发
81 | 订单模块开发
82 | 谈谈Web商城的性能优化策略
83 | 功能开发总结
84 | 玩转webpack结束语
加餐:webpack 5 新特性解析
加餐:bundle和bundless的差异
加餐:Vite的构建原理
本节摘要
登录 后留言

全部留言(59)

  • 最新
  • 精选
袋袋
如果我既想提取静态资源react,又想提取公共资源还想打到不同的文件里怎么办,支持数组方式吗

作者回复: 可以的,这个cacheGroup 可以配置多个组的。想打包到不同的文件只需要传到 html-webpack-plugin的 chunk 按照需要设置即可

2019-06-12
4
4
段子黄
为什么使用 optimization.splitChunks 抽取了 vue、vue-router、vuex之后,当我运行的时候,浏览器中报 Uncaught TypeError: Cannot read property 'call' of undefined 这个错误哦,这些包确实是抽取出来了,但是就是运行不起来,请问下问题出在哪里,我都是按照视频的要求来配置的,只是你是用的react,我是使用的vue,应该没影响吧?

作者回复: 嗯,和框架无关的,本身 webpack 就是通用的打包工具。能否把你的项目发个链接我看下呢?帮你分析分析

2019-06-15
3
1
得闲读书
老师会讲一些比较好点的换肤方案吗?

作者回复: 哈哈,换肤是指 VS Code的编辑器主题吗?

2019-06-15
2
1
金樽明月
特别是这个提取页面公共资源一节。如果是用框架比如 VUE3 写项目,很少需要用 script 引入什么东西,一般不是直接 npm 吗?难道是做的项目都太小了吗?哈哈,期待回复。

作者回复: 应该是你做的项目不够复杂吧,大的项目都需要考虑性能优化,基础包、页面公共js文件提取和懒加载js都是优化必备手段

2019-06-28
白色风车
老师,您好,我想问一下 HtmlWebpackPlugin 的 chunks 配置中引入 chunks 顺序会有影响吗?提取出来的common chunk 是不是应该写在 HtmlWebpackPlugin 的 chunks 配置数组的最前面?

作者回复: 会有影响的,chunks 决定了插入到 html 里面的 js 脚本的引用顺序。建议顺序是:react/react-dom 基础包 -> 业务项目的 公共 common.js 包 的顺序放

2019-06-26
yhq
求老师这款vscode主题

作者回复: One Monokai

2019-06-13
望眼欲穿
很好

作者回复: 哈哈,感谢夸奖

2019-06-12
Geek_Jason
老师有一个疑问,在webpack.prod.js文件里已经写入了react和React-dom的entry地址,为什么还要在html文件中引入呢?
2019-06-25
13
19
developer_hsl
这里没有在html模板里面用script引入react和react-dom, webpack.prod.js配置好后,在打包后的index.html中,自动引入了react和react-dom各一次, 在search.html中各引入了两次,这是为什么啊,求翻牌!
2019-07-09
9
10
change。
module.exports = { //... optimization: { splitChunks: { // async:异步引入的库进行分离(默认), initial: 同步引入的库进行分离, all:所有引入的库进行分离(推荐) chunks: 'async', minSize: 30000, // 抽离的公共包最小的大小,单位字节 maxSize: 0, // 最大的大小 minChunks: 1, // 资源使用的次数(在多个页面使用到), 大于1, 最小使用次数 maxAsyncRequests: 5, // 并发请求的数量 maxInitialRequests: 3, // 入口文件做代码分割最多能分成3个js文件 automaticNameDelimiter: '~', // 文件生成时的连接符 automaticNameMaxLength: 30, // 自动自动命名最大长度 name: true, //让cacheGroups里设置的名字有效 cacheGroups: { //当打包同步代码时,上面的参数生效 vendors: { test: /[\\/]node_modules[\\/]/, //检测引入的库是否在node_modlues目录下的 priority: -10, //值越大,优先级越高.模块先打包到优先级高的组里 filename: 'vendors.js'//把所有的库都打包到一个叫vendors.js的文件里 }, default: { minChunks: 2, // 上面有 priority: -20, // 上面有 reuseExistingChunk: true //如果一个模块已经被打包过了,那么再打包时就忽略这个上模块 } } } } };
2019-10-11
1
7
收起评论