世界上最伟大的投资就是投资自己的教育
Webpack 3 零基础入门视频教程
14 个视频
本套视频以 webpack 3 为基础,如果你的 webpack 版本是 4 以上的话,可能会有很多差异!
1 小时 35 分钟入门 前端 Webpack
已完结
🌕开始学习
![Webpack 3 零基础入门视频教程](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/playlist/image/11/2018/79d787e99ab8e0cb9563b5343ab4c6eb.png)
价格: 免费
注意,视频的 Webpack 版本是 3.x,如果你的版本是 4(目前最新版)以上的,请注意兼容性问题,因为版本 3 和版本 4 差异太大
Webpack 4 的视频可查看: https://www.qiuzhi99.com/playlists/qing-song-xue-webpack-4
学员贡献的 webpack 4 的学习源码: https://github.com/zxstarxing/LearnWebpack4
最终的配置源码: https://github.com/hfpp2012/hello-webpack
1. webpack 是什么?
先来说一下 webpack
是什么。
webpack
的官方对它是这样定义的:
webpack
is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
中文的大概意思是说:
webpack
可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript
模块以及其它的一些浏览器不能直接运行的拓展语言(Scss
,TypeScript
等),并将其转换和打包为合适的格式供浏览器使用。
用大白话可以这样说:
webpack
是一个前端模块化方案,更侧重模块打包,我们可以把开发中的所有资源(图片、js 文件、css 文件等)都看成模块,通过loader
(加载器)和plugins
(插件)对资源进行处理,打包成符合生产环境部署的前端资源。
如果这样还不明白的话,我们来说下前因后果。
在当今的社会,作为 web 开发,会越来越意识到前端的重要性,随着 HTML5
、 CSS3
、 ES6
各种技术的发展,前端的开发越来越庞大。甚至有些应用就是单页面应用 (SPA),纯 JavaScript
开发,JavaScript
文件的管理也是一个问题。JavaScript
模块化编程,已经成为一个迫切的需求,这就出现了 JavaScript
的模块解决方案,以前是用 requirejs
或 seajs
,而现在则是用 webpack
。
举个例子,很多人开发了各种优秀的 JavaScript
模块或组件,我们不想重复发明轮子,而是想直接利用别人的模块,就是类似 require
或 include
这样的机制,把别人的模块引入进来,但是 JavaScript
又没有 类
或包
这样的概念,那应该如何做呢?
如何去引入别人的模块?引入之后保证各种依赖关系不出错?这就是 webpack
要解决的问题。
模块化的概念我们理解了,那如何理解 打包
这个词呢?
其实,模块化的问题解决之后,webpack
就能把各种资源模块打包合并成一个文件输出给浏览器。在打包的过程中还能对这些资源进行处理,比如压缩减少体积,把 sass
编译成 css
, coffee
编译成 js
。所以它在某些程度上,跟 grunt/gulp
的功能有些相同。至于与 grunt/gulp
的不同之处,我们下面会讲到。
2. 与 grunt/gulp
的区别
grunt/gulp
的定义是 Task Runner
。它有点像 ruby
的 Rake
或 Thor
,如果你不懂 ruby
,那 c/cpp
语言的 make
,这应该总知道吧。它是一种写任务的工具,只是 grunt/gulp
是用 JavaScript
来写 task 而已。
grunt/gulp
强调的是前端开发的工作流程,我们可以通过配置一系列的 task,定义 task 处理的事务(例如文件压缩合并、雪碧图、启动 server、版本控制等),然后定义执行顺序,来让 grunt/gulp
执行这些 task,从而构建项目的整个前端开发流程。
const gulp = require('gulp');
const babel = require('gulp-babel');
// gulp.src 会指定源文件,然后通过 pipe 函数把内容传给下个处理方法,最后 gulp.dest 是输出处理后的文件内容。
gulp.task('default', () =>
gulp.src('src/app.js')
.pipe(babel({
presets: ['es2015']
}))
.pipe(gulp.dest('dist'))
);
打个比方,如果你的工程模块依赖很简单,不需要把 js 或各种资源打包,只需要简单的合并、压缩,那就不需要 webpack。grunt/gulp 就够用了。反过来,如果你的工程庞大,页面中使用了很多库(SPA 很容易出现这种情况),那就可以选择使用 webpack
,因为这样既能做到模块化管理,也能做到 grunt/gulp
的一些功能,比如压缩,转化 coffeescript
为 js
等。
gulp
也能和webpack
结合起来用,gulp
里面有个 webpack-stream 插件。就是让webpack
专门去做 module dependency 的事情, 生成一个bundle.js
文件,然后再用gulp
去做一些其他杂七杂八 minify, uglify 的事情。 后来人们发现webpack
有个plugins
的选项, 可以用来进一步处理经过loader
生成的bundle.js
,于是有人写了对应的插件, 所以 minify/uglify, 生成 hash 的工作也可以转移到webpack
本身了,挤掉了gulp
这部分的市场份额。 再后来大家有发现npm/package.json
里面的 scripts 原来好好用啊,调用任务的时候就直接写一个简单的命令,因为gulp
也不就是各种插件命令的组合呀,大部分情况下越来越不需要gulp/grunt
之类的了。 所以你现在看到的很多新项目都是package.json
里面 scripts 写了一堆,外部只需要一个webpack
就够了。(摘自网络 https://segmentfault.com/q/1010000008058766)
最后总结一下:
虽然都是前端自动化构建工具,但看他们的定位就知道不是对等的。
grunt/gulp
严格上讲,模块化不是他强调的东西,他旨在规范前端开发流程。
webpack
更是明显强调模块化开发,而那些文件压缩合并、预处理等功能,不过是他附带的功能。
3. 跟 Browserify 相比
webpack
与其和 grunt/gulp
相比较,还不如跟 Browserify
比较,因为它们两者更相近,不过好像 Browserify
应该被 webpack
代替了吧,我对 Browserify
了解也不多,在此就不细说了。
4. 优势
webpack
不仅仅能处理 js, 也能处理 css, 也能处理 html,甚至是图片等各种前端资源。它开发便捷,仅仅使用一个配置文件,就能替代部分
grunt/gulp
的工作,比如打包、压缩混淆、图片转 base64 等。扩展性强,插件机制完善。
5. 为什么要学习 webpack
现在最流行的 react
、vue
、angular
等技术,你要学习和使用它们,难免会碰到 webpack
,因为一般都会用 webpack
来构建前端的开发环境,这样,我们还有什么理由不学习呢?
Webpack 3 零基础入门视频教程 #1 - 介绍03:52
Webpack 3 零基础入门视频教程 #3 - 实现 hello world07:37
Webpack 3 零基础入门视频教程 #12 - 如何使用模块热替换 HMR 来处理 CSS07:53
Webpack 3 零基础入门视频教程 #2 - 安装03:38
Webpack 3 零基础入门视频教程 #5 - 使用第一个 Webpack 插件 html-Webpack-plugin11:09
Webpack 3 零基础入门视频教程 #4 - Webpack 的配置文件 Webpack.config.js03:41
Webpack 3 零基础入门视频教程 #6 - 使用 loader 处理 CSS 和 Sass12:51
Webpack 3 零基础入门视频教程 #7 - 初识 Webpack-dev-server06:24
Webpack 3 零基础入门视频教程 #8 - 用 Webpack 和 babel 配置 React 开发环境05:09
Webpack 3 零基础入门视频教程 #14 - 如何打包图片10:21
Webpack 3 零基础入门视频教程 #13 - 生产环境 vs 开发环境06:33
Webpack 3 零基础入门视频教程 #10 - 配置多个 HTML 文件06:38
Webpack 3 零基础入门视频教程 #11 - 如何使用 pug (jade) 作为 HTML 的模板04:09
Webpack 3 零基础入门视频教程 #9 - 用 clean-Webpack-plugin 来清除文件05:07
![Webpack 3 零基础入门视频教程 #1 - 介绍](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/movie/image/74/2018/fe07eee1f0268775c646e844b05bff2d.png)
Webpack 3 零基础入门视频教程 #1 - 介绍
免费03:52
8621 次点击
![Webpack 3 零基础入门视频教程 #3 - 实现 hello world](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/movie/image/69/2018/9a11768d2c2eea7c331011b06a7d4eb2.png)
Webpack 3 零基础入门视频教程 #3 - 实现 hello world
免费07:37
6061 次点击
![Webpack 3 零基础入门视频教程 #12 - 如何使用模块热替换 HMR 来处理 CSS](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/movie/image/79/2018/9eb60bc8bf2b004e4db7d1cc0d5f1d8c.png)
Webpack 3 零基础入门视频教程 #12 - 如何使用模块热替换 HMR 来处理 CSS
免费07:53
5448 次点击
![Webpack 3 零基础入门视频教程 #2 - 安装](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/movie/image/68/2018/d9b6f4554ead74cebd62effb6a671a52.png)
Webpack 3 零基础入门视频教程 #2 - 安装
免费03:38
5331 次点击
![Webpack 3 零基础入门视频教程 #5 - 使用第一个 Webpack 插件 html-Webpack-plugin](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/movie/image/71/2018/79d59b191996ede84d98442fd4613cb0.png)
Webpack 3 零基础入门视频教程 #5 - 使用第一个 Webpack 插件 html-Webpack-plugin
免费11:09
5256 次点击
![Webpack 3 零基础入门视频教程 #4 - Webpack 的配置文件 Webpack.config.js](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/movie/image/70/2018/9675c1ff34145d7b1a68d3ddb6c0e555.png)
Webpack 3 零基础入门视频教程 #4 - Webpack 的配置文件 Webpack.config.js
免费03:41
4975 次点击
![Webpack 3 零基础入门视频教程 #6 - 使用 loader 处理 CSS 和 Sass](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/movie/image/72/2018/5f3b980f0213c331c10559468a556d31.png)
Webpack 3 零基础入门视频教程 #6 - 使用 loader 处理 CSS 和 Sass
免费12:51
4859 次点击
![Webpack 3 零基础入门视频教程 #7 - 初识 Webpack-dev-server](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/movie/image/73/2018/afc8e8f20f2d9785d7bcd30c11fbfe51.png)
Webpack 3 零基础入门视频教程 #7 - 初识 Webpack-dev-server
免费06:24
4423 次点击
![Webpack 3 零基础入门视频教程 #8 - 用 Webpack 和 babel 配置 React 开发环境](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/movie/image/75/2018/0b3e6157812098b352cdeefc6c06ce17.png)
Webpack 3 零基础入门视频教程 #8 - 用 Webpack 和 babel 配置 React 开发环境
免费05:09
4347 次点击
![Webpack 3 零基础入门视频教程 #14 - 如何打包图片](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/movie/image/81/2018/7b6fbd4c592d356e087a0f1053751007.png)
Webpack 3 零基础入门视频教程 #14 - 如何打包图片
免费10:21
4029 次点击
![Webpack 3 零基础入门视频教程 #13 - 生产环境 vs 开发环境](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/movie/image/80/2018/c00b57557743e709b8b96933432e0dfa.png)
Webpack 3 零基础入门视频教程 #13 - 生产环境 vs 开发环境
免费06:33
3620 次点击
![Webpack 3 零基础入门视频教程 #10 - 配置多个 HTML 文件](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/movie/image/77/2018/586e508f161f26ce94633729ac56c602.png)
Webpack 3 零基础入门视频教程 #10 - 配置多个 HTML 文件
免费06:38
3507 次点击
![Webpack 3 零基础入门视频教程 #11 - 如何使用 pug (jade) 作为 HTML 的模板](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/movie/image/78/2018/59b2900aa03cb2182a51cdb520b535b6.png)
Webpack 3 零基础入门视频教程 #11 - 如何使用 pug (jade) 作为 HTML 的模板
免费04:09
3502 次点击
![Webpack 3 零基础入门视频教程 #9 - 用 clean-Webpack-plugin 来清除文件](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/movie/image/76/2018/12b9cf7e9366f0cdb434c397e816c819.png)
Webpack 3 零基础入门视频教程 #9 - 用 clean-Webpack-plugin 来清除文件
免费05:07
3249 次点击
179 位学员学过
![haha0654 · 凡人](/system/letter_avatars/2/H/69_208_226/40.png)
![严俊 ༽ · 凡人](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/user/avatar/29535/1400cfba374d0c7b38f014be00171dd9.jpeg)
![咖啡豆 · 大罗](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/user/avatar/9295/9fd97437a8a8eeee95d67c10cfde6c4b.jpeg)
![Mandy · 凡人](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/user/avatar/28143/1c358355112e14d820bad1c7a529dfc4.jpeg)
![hff · 凡人](https://rails365.oss-cn-shenzhen.aliyuncs.com/letter_avatars/H/40.png)
![乖乖飞 · 凡人](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/user/avatar/28314/83dd1572003f820049a5989e2764bef0.jpeg)
![大吃一🐳 · 凡人](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/user/avatar/28215/d379332d07a4f36845419239134999bd.jpeg)
![杨建友 · 大乘](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/user/avatar/13930/58a85f5976a796ebc9f3848383c0f7a2.jpeg)
![南风吹北巷 · 凡人](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/user/avatar/27799/0f76d41ae5a676751fd3abc38b3507e6.jpeg)
![Amy · 金丹](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/user/avatar/27618/b4fd9a50c93a858f1fd00c2cb59ba1db.jpeg)
![茶汰 · 筑基](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/user/avatar/27463/f695ab7db9b69f02d6b999634ecd35ac.jpeg)
![guxiaobai · 大罗](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/user/avatar/2555/2018/b5b79ad10cbc1796107e4e05fa1fff32.jpeg)
![ζ 兮ゞ · 凡人](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/user/avatar/26559/7512b57dbfffa306a0f9369603bab6c6.jpeg)
![冯焯佳 · 元婴](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/user/avatar/26699/5983cbdc65a0026ad42fbf324f107a16.jpeg)
![落沫 · 凡人](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/user/avatar/26561/32df8d05d8a4c018b7230aaf9f36ecbf.jpeg)
![KEVIN 网启技术 · 凡人](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/user/avatar/17771/c747319b444d893fc0c37c79765bda60.jpeg)
![Ge · 凡人](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/user/avatar/26537/7b75ee9ecff8921a96b20ad94cf2fdd9.jpeg)
![JumpJump🐙 · 凡人](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/user/avatar/26061/cbbbf37d941a1a8d3ef2fb0df84c7742.jpeg)
![readcode · 练虚](https://rails365.oss-cn-shenzhen.aliyuncs.com/letter_avatars/R/40.png)
![vs · 大罗](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/user/avatar/25008/63ec66657a2e90949be3c0ffe77ac03d.jpeg)
![Aman · 金丹](https://rails365.oss-cn-shenzhen.aliyuncs.com/letter_avatars/A/40.png)
![zbx7858 · 道祖](https://rails365.oss-cn-shenzhen.aliyuncs.com/letter_avatars/Z/40.png)
![hxy100 · 凡人](https://rails365.oss-cn-shenzhen.aliyuncs.com/letter_avatars/H/40.png)
![ · 凡人](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/user/avatar/23621/ca16df25657c2b88e47bab5c95460aa5.jpeg)
![Charles Ding · 凡人](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/user/avatar/23419/119472b46b4ecf52319cc56e62dfc81f.jpeg)
![一点通 · 凡人](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/user/avatar/23226/592f2c1f59d582687eb8233cf65d9c00.jpeg)
![hosinokoe · 凡人](https://rails365.oss-cn-shenzhen.aliyuncs.com/letter_avatars/H/40.png)
![Abel🇨🇳 · 化神](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/user/avatar/22621/efda21e07b92304d09e037898cba610d.jpeg)
![rayay · 道祖](https://rails365.oss-cn-shenzhen.aliyuncs.com/letter_avatars/R/40.png)
![゛指尖的阳光 · 凡人](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/user/avatar/15344/a7b0c679487dbacc4d59d95f9a0595cc.jpeg)
![447259731 · 大罗](https://rails365.oss-cn-shenzhen.aliyuncs.com/letter_avatars/4/40.png)
![Ronin · 凡人](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/user/avatar/21952/e4071760ea82823832ae149978319055.jpeg)
![feiyuqingshang · 元婴](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/user/avatar/21909/7214104fbe25ad09f3faf382639a0e8d.png)
![mwkkk · 合体](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/user/avatar/19341/635625e9cb0ee2b92306600341c54f4f.png)
![18296295852 · 凡人](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/user/avatar/21822/980b48fd0c5e4af2c529bc83cd0e05a2.jpeg)
![刘小帅 · 化神](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/user/avatar/11479/5bfd439c1e5131cde4ee190d61e84a9d.jpeg)
![jxnuedu · 凡人](https://rails365.oss-cn-shenzhen.aliyuncs.com/letter_avatars/J/40.png)
![破妄之眼 · 道祖](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/user/avatar/19570/5f78f691a59c7edf110b4e48fb864909.jpeg)
![Caden · 凡人](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/user/avatar/21367/f938cfaee043e5bf6f13b88c609b91dc.jpeg)
![liutianfu · 化神](https://rails365.oss-cn-shenzhen.aliyuncs.com/letter_avatars/L/40.png)
![十二 · 凡人](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/user/avatar/20588/bf7c3d9d5ba566e6fe15d083e746c294.jpeg)
![顾勇祥 · 元婴](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/user/avatar/20521/44922e99fe0f9e06d8fdedf326394378.jpeg)
![路漫漫 · 合体](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/user/avatar/19865/ff18de486a5018e0a06eca07a9d5ccf4.jpeg)
![~HU · 凡人](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/user/avatar/10824/398a618ffb2ad19e7d857486442301ca.jpeg)
![510404494 · 凡人](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/user/avatar/19399/d02407bc25cb62982d32c132b1c21a79.jpeg)
![948083383 · 凡人](https://rails365.oss-cn-shenzhen.aliyuncs.com/letter_avatars/9/40.png)
![周帝 · 凡人](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/user/avatar/19234/8cf9f93de6c884348996f39217f74152.jpeg)
![timorTm · 练虚](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/user/avatar/5519/2018/54599e36be33d8740a76234b67b2f70a.png)
![xiaoyi00112 · 凡人](https://rails365.oss-cn-shenzhen.aliyuncs.com/letter_avatars/X/40.png)
![古董 · 凡人](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/user/avatar/18747/ebca98a98d91bc6bf7ba8006007df05d.jpeg)
![李攀攀 · 凡人](https://rails365.oss-cn-shenzhen.aliyuncs.com/uploads/user/avatar/18697/4998efc33532fb5982e8fbe11d995e9c.jpeg)
![RubyRose · 凡人](https://rails365.oss-cn-shenzhen.aliyuncs.com/letter_avatars/O/40.png)
▬▬▬▬▬▬ 联系我 👋 ▬▬▬▬▬▬
微信:qiuzhi99pro
b 站: https://space.bilibili.com/31152817
知乎: https://www.zhihu.com/people/rails365
Youtube: https://www.youtube.com/channel/UCA-Jkgr40A9kl5vsIqg-BIg
© 汕尾市求知科技有限公司 | Rails365 Gitlab | Qiuzhi99 Gitlab | 知乎 | b 站 | 搜索
粤公网安备 44152102000088号
| 粤ICP备19038915号
好的 谢谢老师 感觉学的东西跟实际应用的时候还是有一点差距的 实际项目里感觉更难一些😂