下载APP
登录
关闭
讲堂
算法训练营
Python 进阶训练营
企业服务
极客商城
客户端下载
兑换中心
渠道合作
推荐作者
当前播放: 27 | 使用sourcemap
00:00 / 00:00
标清
  • 标清
1.0x
  • 2.0x
  • 1.5x
  • 1.25x
  • 1.0x
  • 0.5x
网页全屏
全屏
00:00
付费课程,可试看

玩转webpack

共84讲 · 84课时,约900分钟
5432
免费
01 | 课程介绍
免费
02 | 内容综述
免费
03 | 为什么需要构建工具
04 | 前端构建演变之路
05 | 为什么选择webpack
06 | 初识webpack
免费
07 | 环境搭建:安装webpack
08 | webpack初体验:一个最简...
09 | 通过npm script运行webpa...
免费
10 | webpack核心概念之entry
免费
11 | webpack核心概念之output
12 | webpack核心概念之loaders
13 | webpack核心概念之plugins
14 | webpack核心概念之mode
15 | 解析ECMASCript 6和React...
16 | 解析CSS、Less和Sass
17 | 解析图片和字体
18 | webpack中的文件监听
19 | webpack中的热更新及原理...
20 | 文件指纹策略:chunkhash...
21 | HTML 、CSS和JavaScript...
22 | 自动清理构建目录产物
23 | PostCSS插件autoprefixer...
24 | 移动端CSS px自动转换成r...
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规范和changel...
46 | 语义化版本(Semantic Ve...
47 | 初级分析:使用webpack内...
48 | 速度分析:使用speed-mea...
49 | 体积分析:使用webpack-b...
50 | 使用高版本的webpack和Nod...
51 | 多进程/多实例构建
52 | 多进程并行压缩代码
53 | 进一步分包:预编译资源模...
54 | 充分利用缓存提升二次构建...
55 | 缩小构建目标
56 | 使用Tree Shaking擦除无...
57 | 使用webpack进行图片压缩
58 | 使用动态Polyfill服务
59 | webpack启动过程分析
60 | webpack-cli源码阅读
61 | Tapable插件架构与Hooks设...
62 | Tapable是如何和webpack进...
63 | webpack流程篇:准备阶段
64 | webpack流程篇:模块构建...
65 | webpack流程篇:文件生成
66 | 动手编写一个简易的webpac...
67 | 动手编写一个简易的webpac...
68 | loader的链式调用与执行顺...
69 | 使用loader-runner高效进...
70 | 更复杂的loader的开发场
71 | 实战开发一个自动合成雪碧...
72 | 插件基本结构介绍
73 | 更复杂的插件开发场景
74 | 实战开发一个压缩构建资源...
75 | 商城技术栈选型和整体架构
76 | 商城界面UI设计与模块拆分
77 | React全家桶环境搭建
78 | 数据库实体和表结构设计
79 | 登录注册模块开发
80 | 商品模块开发
81 | 订单模块开发
82 | 谈谈web商城的性能优化策...
83 | 功能开发总结
84 | 结束语
本节摘要

精选留言(14)

  • 2019-06-11
    基本上开发环境直接用source-map。
    production环境就把source-map添加到Error Reporting Tool(e.g. Sentry)上。这样既不直接暴露源代码,也能方便解决production环境遇到的bug。

    作者回复: 嗯嗯,理解正确。

    1
    4
  • 2019-06-10
    不要天天催老师更新,视频质量最重要。

    作者回复: 感谢支持

    3
  • 2019-07-07
    pdfT中source map 类型,首次构建,二次构建+++,++,+,--,-,0,是什么意思
    2
    2
  • 2019-10-16
    老师讲的好,通俗易懂,每次看完视频,我自己都动手敲一遍,我最喜欢的还是看评论,评论里面老师的解答真是耐人寻味,只有在大厂才能有这么多经验,佩服。
    1
  • 2019-06-12
    能讲讲webpack的target参数的作用以及用法吗?

    作者回复: 可以的哈,在SSR服务端渲染打包这节会介绍到

    1
  • 老师,浏览器 debugger 用那种方便
  • 2019-07-19
    老师,webpack.dev.js中增加多入口的配置之后,src目录下必须要有个index文件或者文件夹,如果没有这个npm run dev之后不会显示界面是什么原因呢?
    1
  • 2019-07-16
    appledeMacBook-Pro:webpack_z apple$ npm run dev

    > webpack_z@1.0.0 dev /Users/apple/Documents/myGit/webpack_z
    > webpack-dev-server --config webpack.dev.js --open

    events.js:174
          throw er; // Unhandled 'error' event
          ^

    Error: listen EADDRNOTAVAIL: address not available 140.143.221.119:9000
        at Server.setupListenHandle [as _listen2] (net.js:1253:19)
        at listenInCluster (net.js:1318:12)
        at GetAddrInfoReqWrap.doListen [as callback] (net.js:1451:7)
        at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:61:10)
    Emitted 'error' event at:
        at emitErrorNT (net.js:1297:8)
        at process._tickCallback (internal/process/next_tick.js:63:19)
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! webpack_z@1.0.0 dev: `webpack-dev-server --config webpack.dev.js --open`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the webpack_z@1.0.0 dev script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    npm ERR! A complete log of this run can be found in:
    npm ERR! /Users/apple/.npm/_logs/2019-07-16T08_02_40_352Z-debug.log
    appledeMacBook-Pro:webpack_z apple$

    这个报错是怎么回事--
    展开
  • 2019-07-07
    在生产环境,使用soucre map打包vue文件报错
    Unhandled rejection Error: original.line and original.column are not numbers -- you probably meant to omit the original mapping entirely and only map the generated position. If so, pass null for the original mapping instead of an object with empty or null values.
        at SourceMapGenerator_validateMapping [as _validateMapping] (/Users/threewhisky/Desktop/miaomovie/node_modules/webpack-sources/node_modules/source-map/lib/source-map-generator.js:276:15)
        at SourceMapGenerator_addMapping [as addMapping] (/Users/threewhisky/Desktop/miaomovie/node_modules/webpack-sources/node_modules/source-map/lib/source-map-generator.js:110:12)
    展开
  • 2019-07-07
    source-map能配合热更新使用吗?
  • 2019-06-12
    老师, 你开篇说了,生产环境下不建议使用source map(我也觉得不应该将代码的业务逻辑暴露给其他人), 但是在这种情况下,线上报错我们应该如何来调试

    作者回复: 一般情况下公司内应该是有前端监控系统的,一旦报错,可以把 sourcemap 上传到这个监控系统里面。但是不要把 sourcemap 文件和静态资源的 cdn 一起发布到线上就好了。

    1
  • 2019-06-12
    很期待老师讲解原理,带我们了解源码,编写自己的插件合loader

    作者回复: 后面第6、7章会重点讲解的哈

  • 2019-06-11
    老师讲的真不错👍

    作者回复: 感谢夸奖😄

  • 2019-06-10
    老师讲得特别好,深入浅出。要是更新能再快一点就好了~

    作者回复: 嗯嗯,在抓紧更新中了