当前播放: 33 | webpack打包组件和基础库
00:00 / 00:00
高清
  • 高清
1.0x
  • 2.0x
  • 1.5x
  • 1.25x
  • 1.0x
  • 0.5x
网页全屏
全屏
00:00
付费课程,可试看
课程目录
第一章:webpack与构建发展简史 (9讲)
01 | 课程介绍
免费
02 | 内容综述
免费
03 | 为什么需要构建工具
免费
04 | 前端构建演变之路
05 | 为什么选择webpack
06 | 初识webpack
07 | 环境搭建:安装webpack
免费
08 | webpack初体验:一个最简单的例子
09 | 通过npm script运行webpack
第二章:webpack基础用法 (12讲)
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代码压缩
第三章:webpack进阶用法 (16讲)
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 | 构建异常和中断处理
第四章:编写可维护的webpack构建配置 (9讲)
38 | 构建配置包设计
39 | 功能模块设计和目录结构
40 | 使用ESLint规范构建脚本
41 | 冒烟测试介绍和实际运用
42 | 单元测试和测试覆盖率
43 | 持续集成和Travis CI
44 | 发布构建包到npm社区
45 | Git Commit规范和changelog生成
46 | 语义化版本(Semantic Versioning)规范格式
第五章:webpack构建速度和体积优化策略 (12讲)
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服务
第六章:通过源代码掌握webpack打包原理 (9讲)
59 | webpack启动过程分析
60 | webpack-cli源码阅读
61 | Tapable插件架构与Hooks设计
62 | Tapable是如何和webpack进行关联起来的?
63 | webpack流程篇:准备阶段
64 | webpack流程篇:模块构建和chunk生成阶段
65 | webpack流程篇:文件生成
66 | 动手编写一个简易的webpack(上)
67 | 动手编写一个简易的webpack(下)
第七章:编写loader和插件 (7讲)
68 | loader的链式调用与执行顺序
69 | 使用loader-runner高效进行loader的调试
70 | 更复杂的loader的开发场
71 | 实战开发一个自动合成雪碧图的loader
72 | 插件基本结构介绍
73 | 更复杂的插件开发场景
74 | 实战开发一个压缩构建资源为zip包的插件
第八章:React全家桶和webpack开发商城项目 (10讲)
75 | 商城技术栈选型和整体架构
76 | 商城界面UI设计与模块拆分
77 | React全家桶环境搭建
78 | 数据库实体和表结构设计
79 | 登录注册模块开发
80 | 商品模块开发
81 | 订单模块开发
82 | 谈谈web商城的性能优化策略
83 | 功能开发总结
84 | 结束语
33 | webpack打包组件和基础库

33 | webpack打包组件和基础库

程柳锋
腾讯高级工程师,IVWEB团队社区和工程化负责人
84讲 84课时,约900分钟5512
单独订阅¥99
2人成团¥79
5
本节摘要
登录 后留言

精选留言(21)

  • Objectivezt
    1:28秒提及到开发阶段使用压缩版,生产使用非压缩版本,为什么不是反过来呀?

    作者回复: 嗯,听的很仔细,点赞。压缩版本在线上环境使用,非压缩版本在开发阶段或者调试时使用。

    2019-08-11
    1
    5
  • dudustyle
    老师,课程跟实际的课程安排好像不一致,漏了几节课,SSR和骨架屏,是要放在后面讲吗?

    作者回复: 放在这节课后面了

    2019-06-25
    3
  • 天青
    index.js中判断不同环境引入不同的包,这个判断少了个等号
    process.env.NODE_ENV === 'production'

    作者回复: 嗯嗯,在这个组件库的1.0.1版本是有修复的。视频里面安装的时候也是使用的这个版本

    2019-06-25
    2
    3
  • coder
    在第23分钟的时候,对index.js内容的编写,有一个bug:
    ````
    if (process.env.NODE_ENV = 'production') {
    ...
    }
    ````
    `if`语句里的条件判断,应该用`===`而不是'='。
    2019-10-23
    2
  • 段子黄
    打包出来之后,在html页面中导入large-number.js为什么报 add 方法不存在?我的webpack配置如下
    感觉和你一摸一样啊,libraryTarget 设置为 umd 不是可以支持直接导入 script标签吗?

    const TerserPlugin = require('terser-webpack-plugin')

    module.exports = {
        mode:'none',
        entry:{
            'large-number':'./src/common/largeNumber.js',
            'large-number.min':'./src/common/largeNumber.js'
        },
        output:{
            filename:'[name].js',
            library:'largeNumber',
            libraryTarget:'umd', // 支持AMD CJS ESM script导入等
            libraryExport:'default'
        },
        optimization: {
            minimize:true,
            minimizer: [new TerserPlugin({
                include:/\.min\.js$/
            })]
        }
    }

    作者回复:
    是因为这个组件编写的时候是直接通过 export default 导出了一个默认的函数:

    export default function add(a, b) {
        let i = a.length - 1;
        let j = b.length - 1;

        let carry = 0;
        let ret = '';
        while (i >= 0 || j >= 0) {
       }
       ......
    }

    所以通过script、或者 ESM/CJS/AMD 的方式引用的时候直接 largeNumber('999', '1') 就可以了。如果想要通过 largeNumber.add() 的方式调用的话,写成 export function add(a, b) {} 的形式,把 default 去掉

    2019-06-26
    2
  • ꯭M꯭u꯭r꯭p꯭h꯭y꯭
    我打了vue组件,打包完,无论是require还是import,都没有正确引入我打包好的内容
    console.log(require('../lib/index.min.js'))
    // 打印出来的是 Module {__esModule: true, Symbol(Symbol.toStringTag): "Module"}

    只有console.log(window.mycomponents)
    // 才能打印出 正确内容 {version: "1.0.0", helloBeehive: {…}, tempButton: {…}}

    说明内容确实引入了,还在window中注册了,但是import和require没法正确使用




    配置信息
    entry: resolve('./src/main.js'),
    output: {
    path: resolve('./lib'),
    filename: 'index.min.js',
    chunkFilename: '[id].js',
    library: lowercamelcase(pkg.name),
    libraryTarget: 'umd',
    libraryExport: 'default',
    globalObject: "typeof self !== 'undefined' ? self : this"
    }


    这个是main.js
    import tempButton from './components/temp-button'
    import helloBeehive from './components/hello-beehive'

    export default {
    version: '1.0.0',
    helloBeehive,
    tempButton
    }
    2019-09-11
    1
  • Sherry
    老师,请问,打包未压缩版本的意义是什么呢?
    【个人理解】
    index.js导出的时候,有判断NODE_ENV,这里的NODE_ENV,是指使用组件的项目的构建环境。
    这样一来,组件使用者在开发过程中,就可以debug到编译过、但未压缩的组件代码了。而生产环境,会打包压缩后的组件代码。
    【疑问】
    如果为了开发者debug方便,为什么不选择开启前面讲过的sourcemap呢?
    如果不开启sourcemap是为了保护源码,不泄露给开发者,那暴露编译过、未压缩的代码,就不算暴露源码了嘛?
    2019-08-28
    1
  • kaiking
    老师,关于打包一直报strict的严格模式问题,百度了好多方法都无效,已经被困扰了一个星期,麻烦老师帮忙看下,感激不尽!!!

    源码git地址:
    https://gitee.com/kaiking_g/webpack-errors.git
    在该目录下: 3.33.webpack-build-commonent

    2019-12-16
  • kaiking
    老师,请问下,webpack4如何打包第三方插件?比如mui,ligerui等

    最近做的项目用webpack4构建工程,前端ui用的是mui,不像jq这种只是一个单独的文件,mui框架都是分模块的,如今打包总是报错
    2019-12-11
  • 慢半拍的奥斯卡
    为什么npm publish后,提示成功,但是我在npm里面找不到我的包
    2019-11-24
  • 凭实力写bug
    老师,我试过import 和 require都可以,那么怎么使用<script>呢,我直接把打包代码拷贝过来,引入好像不行呀
    2019-11-10
  • Geek_5541c1
    打包出来的lib库,在web下运行没问题,如何打包支持node环境运行的lib? 按照教程中打出来的包里面是window的环境,因此,在node环境下运行会报错:
    ReferenceError: window is not defined
    2019-09-13
  • loosen
    PC端视频播放器终于支持tab暂停和左右键前进后退了,点赞;产品迭代还阔以
    2019-08-23
  • 老是您好,我发布自己的npm包,也是导出为umd模块,但是样式无法加载,这个样式需要怎么配置呢。因为这个模块包没有html
    2019-08-13
  • Geek_人
    index.js中 process.env.NODE_ENV 区分线上环境和生产环境,那么项目中使用的话 是否可以选择其中其一个版本
    2019-07-25
  • 范饭飯
    😂 老师是不知道数值调用 .toString() 需要用空格隔开吗?
    2019-07-11
    2
  • bug
    按照这种打包出来的使用方式,怎么处理依赖包重复打包,比如说,我们编写的a包引用了b包,然后我们在业务代码里面也引用了b包,这样的话就会重复打包了b包
    2019-07-10
  • bug
    我看打包出来后的代码,是放在window下面的。那如何实现多端都能使用
    2019-07-08
  • RELAX
    一开始听的很懵逼,但是坚持下下来,发现越听越明白。感觉思路都打通了。

    作者回复: 强,厉害了

    2019-07-01
    1
  • 野狼
    老师好,组件的入口文件index.js使用的是cjs的形式导出代码,有两个问题想请教:
    1.业务代码代码通过ejs的方式可以引用组件,这是因为组件libraryTarget设置成了umd,还是因为业务代码也是使用了webpack打包,webpack自动帮我们做了转换?
    2.组件的入口文件index.js可不可使用ejs的形式导出代码?
    2019-06-29
收起评论
看过的人还看
浏览器工作原理与实践

李兵  前盛大创新院高级研究员

43讲 | 6344 人已学习

拼团 ¥79 原价 ¥99
Node.js开发实战

杨浩  腾讯高级工程师

57讲 | 3913 人已学习

拼团 ¥99 原价 ¥129
重学前端

程劭非(winter)  前手机淘宝前端负责人

58讲 | 33177 人已学习

¥99
TypeScript开发实战

梁宵  搜狗营销事业部高级架构师

47讲 | 3078 人已学习

拼团 ¥99 原价 ¥129