每周三集前端免费视频
每年帮助超100万前端爱好者学习

跟技术胖学webpack视频教程(1-5节,持续更新中)

前言:

《webpack3.X 成神之路》已经开始更新,是最新的3.X版本讲解。此文章已经过时,不作更新。请转到最新文章学习。

Webpack3.X版 成神之路 全网首发

您有两种学习方式:观看视频或者阅读文字。你也可以在观看视频后直接复制文章中的代码进行调试。

如果在学习中遇到问题,你可以加群(QQ群: 364140450)进行讨论。

课程目录:

 


第一节:Hello Webpack

视频支持高清,你可以全屏观看。如果你不方便收看,还可以看文字教程。

1、webpack介绍:

webpack是一个现代的JavaScript应用模块打包器(module bundler),它能把各种资源,例如JS(含JSX)、coffee、样式(less/sass)、图片等都作为模块来处理和使用。它有着难以置信的配置和神奇的效果,大大提高了我们程序员的工作效率。举个例子:我们可以直接使用require(xxx)的形式来引入各模块,即使他们可能需要经过编译(比如JSX和sass),但我们无须再上面花费太多心思,webpack有着各种健全的加载器(loader)在默默处理这些事情。它可以部分代替Grunt和gulp的功能。

2、webpack的安装

当然常规直接使用npm的形式来安装:

npm 是Node.js的包管理工具,这个我就不作过多的解释了, 这个命令就是:全局安装webpack, -g 是全局安装的意思。

我们还可以直接安装到项目的依赖里,也就是写入package.json

3、配置文件webpack.config.js

按照常规来说,每个项目下都应该配置有webpack.config.js文件,它的作用就如果gulp的gulpfile.js 和Grunt的Gruntfile.js一样,就是一个配置项,告诉webpack它需要作的所有事情和如何去做。所以说webpack.config.js的编写也是我们学习重点。

重点:什么是入口文件?模块打包的起点称之为入口起点(entry point)。入口起点告诉webpack从哪里开始,并遵循着依赖关系进行打包。可以将您的应用入口起点认为是根上下文(contextual root)或app第一个启动文件。

4、我们来作一个实例(Hello World!)

  1. 建立index.html文件
  2. 建立main.js文件
  3. 建立webpack.config.js文件
  4. 安装live-server 并预览程序

index.html

main.js

webpack.config.js

安装live-server,只要用npm install就可以安装了。

好了,这就是我们第一节课学的内容,我还是建议你能试着作一遍,这样才能真正的掌握这些知识。

1 2 3 4 5 6
未经允许不得转载:技术胖-胜洪宇关注web前端技术 » 跟技术胖学webpack视频教程(1-5节,持续更新中)
分享到: 更多 (0)

评论 41

  1. #29

    棒棒的

    匿名1个月前 (03-14)回复
  2. #28

    老师你好厉害

    匿名4个月前 (01-04)回复
  3. #27

    老师,我安装的时候,按安装的时候npm ERR! A complete log of this run can be found in:
    npm ERR! C:\Users\web-01\AppData\Roaming\npm-cache\_logs\2017-12-22T07_
    57_23_394Z-debug.log
    这个是什么错呢,都是按照你的步骤来的呢

    匿名4个月前 (12-22)回复
  4. #26

    A complete log of this run can be found in:
    npm ERR! C:\Users\web-01\AppData\Roaming\npm-cache\_logs\2017-12-22T07_
    38_12_293Z-debug.log
    这个安装不了是怎么回事呢

    匿名4个月前 (12-22)回复
    • 配置时有语法错误,请自己检查你的配置项。

      技术胖4个月前 (12-22)回复
  5. #25

    老师, chungold网站视频是不是挂了,点不开。刚买webpack3.x

    匿名4个月前 (12-12)回复
    • 我是可以打开的,你再看一下。

      技术胖4个月前 (12-12)回复
  6. #24

    老师我的webpack-dev-server也安装成功了,这个出了什么错啊,

    E:\Code\webpack\demo07>webpack-dev-server
    'webpack-dev-server' 不是内部或外部命令,也不是可运行的程序
    或批处理文件。

    E:\Code\webpack\demo07>

    匿名5个月前 (12-09)回复
  7. #23

    E:\zd\VUE\mywebpack>live-server
    Error: listen EACCES 0.0.0.0:8080

    端口怎么改啊,被占用的杀不掉,只能改成别的。

    匿名5个月前 (12-08)回复
  8. #22

    很棒,能学到很多

    匿名5个月前 (12-02)回复
    • webpack3.x版本已经上线,有时间可以学习一下。

      技术胖5个月前 (12-03)回复
  9. #21

    为啥不能全屏啊

    罗文雄6个月前 (10-23)回复
  10. #20

    想问下 如何打包成一个HTML呢!!!

    持之以恒7个月前 (09-22)回复
    • 已经开了新版本的webpack课程,你可以查看那个课程中会有讲的。

      技术胖7个月前 (09-22)回复
  11. #19

    宇哥,我的live-server安装失败了,报错信息如下:
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\live-server\node_modules\chokidar\node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
    npm ERR! Windows_NT 10.0.15063
    npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "live-server" "-g"
    npm ERR! node v6.11.0
    npm ERR! npm v3.10.10
    npm ERR! path C:\Users\14356\AppData\Roaming\npm\node_modules\live-server\node_modules\apache-md5
    npm ERR! code ENOENT
    npm ERR! errno -4058
    npm ERR! syscall access

    npm ERR! enoent ENOENT: no such file or directory, access 'C:\Users\14356\AppData\Roaming\npm\node_modules\live-server\node_modules\apache-md5'
    npm ERR! enoent ENOENT: no such file or directory, access 'C:\Users\14356\AppData\Roaming\npm\node_modules\live-server\node_modules\apache-md5'
    npm ERR! enoent This is most likely not a problem with npm itself
    npm ERR! enoent and is related to npm not being able to find a file.
    npm ERR! enoent

    npm ERR! Please include the following file with any support request:
    npm ERR! C:\Users\14356\Desktop\webpack\demo01\npm-debug.log

    有没什么办法可以解决,我上次的vue课程那里live-server是没问题的,宇哥您有没什么头绪?

    阿噜7个月前 (09-19)回复
  12. #18

    输入webpack打包,报错,无法解析,需要合适的加载器。
    ERROR in ./app.css
    Module parse failed: /Users/littlefish/Webpack/demo3/app.css Unexpected token (1:5)
    You may need an appropriate loader to handle this file type.
    | body {
    | background-color: red;
    | }
    @ ./main.js 1:0-20

    littlefish7个月前 (09-12)回复
  13. #17

    不配置的话,webpack-dev-server 默认不能自动刷新。还是觉得live-server 省事点

    西瓜芝麻8个月前 (09-06)回复
    • webpack对现在的前端来讲就是一个构建和打包工具,可以减轻你在复杂项目下的开发工作。所以也算必会知识了。

      技术胖8个月前 (09-07)回复
  14. #16

    为什么我这边大图加载失败,404?

    Small Cat8个月前 (08-30)回复
  15. #15

    必须都在同一路径下么?

    周维8个月前 (08-30)回复
  16. #14

    看了你的视频,为什么我的vs code npm下载文件不能自动更新

    呵呵哒8个月前 (08-30)回复
  17. #13

    ...是不是应该先生成package.json....是不是忘记了

    万年前端白8个月前 (08-22)回复
  18. #12

    webpack-dev-server 使用的时候 提醒 colors是 未知属性
    (报错写在最后面)
    我把这个属性注释之后 可以显示了 但是无法 自动刷新 ,改变页面的值 在手动刷新可以!!!

    十分感谢 大佬的技术分享!!受益良多

    colors error :Invalid configuration object. webpack-dev-server has been initialised using a configuration ob
    ject that does not match the API schema.
    - configuration has an unknown property 'colors'. These properties are valid:
    object { hot?, hotOnly?, lazy?, bonjour?, host?, allowedHosts?, filename?, publicPath?, por
    t?, socket?, watchOptions?, headers?, clientLogLevel?, overlay?, key?, cert?, ca?, pfx?, pfxPa
    ssphrase?, inline?, disableHostCheck?, public?, https?, contentBase?, watchContentBase?, open?
    , useLocalIp?, openPage?, features?, compress?, proxy?, historyApiFallback?, staticOptions?, s
    etup?, stats?, reporter?, noInfo?, quiet?, serverSideRender?, index?, log?, warn? }

    colorblind8个月前 (08-17)回复
  19. #11

    live-server可以自动刷新 但是没有加载页面需要的css imgs等资源 怎么解决呀 老铁

    小白杨9个月前 (08-12)回复
    • 可以阻止浏览器缓存静态资源的。

      技术胖9个月前 (08-12)回复
  20. #10

    我在main.js里更改数据 浏览器会自动刷新 ,但是我在首页index.html里更改数据,然后浏览器怎么不会自动更新

    panyulong9个月前 (08-03)回复
  21. #9

    没有生成bundle.js的兄弟们,可以执行webpack -p命令,再执行live-server命令就行了

    Tim9个月前 (07-26)回复
    • 嗯,用你的方法解决了,可是这是为什么呢,刚评论错位置了

      匿名4个月前 (12-28)回复
  22. #8

    第5节课
    Error: Cannot find module 'webpack'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object. (/home/guoxin/code/javascript/webpack-demo/demo05/webpack.config.js:4:15)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)

    是因为全局安装webpack,导致的。
    可以在本项目中安装,npm install webpack

    Guoxin Liu10个月前 (07-12)回复
  23. #7

    胖哥:文件bundle.js也生成了,怎么live-server之后新打开页面。没有Hello word呢?

    祝建新10个月前 (07-04)回复
  24. #6

    bundle.js没有生成,导致index页面无法加载,怎么解决?

    Dino_Xie12个月前 (05-03)回复
  25. #5

    胖哥 我webpack的版本是2.x的 跟着你视频敲的话 出了一个错误 Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
    - configuration.module has an unknown property 'loader'. These properties are valid:
    object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, loaders?, noParse?, rules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence? }
    Options affecting the normal modules (NormalModuleFactory).

    smallBin1年前 (2017-04-29)回复
  26. #4

    webpack安装就是不成功

    极北1年前 (2017-04-12)回复
  27. #3

    Error: Cannot find module 'webpack'
    at Function.Module._resolveFilename (module.js:455:15)
    at Function.Module._load (module.js:403:25)
    at Module.require (module.js:483:17)
    at require (internal/module.js:20:19)
    at Object. (D:tydicnotebookwebpackstudywebpack.config.js:1:75)
    at Module._compile (module.js:556:32)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)
    这个什么情况

    愚梦1年前 (2017-02-09)回复
    • 请问,你的这个问题怎么解决了呢?

      匿名4个月前 (01-02)回复
  28. #2

    不错 讲的很明白 赞一个1

    愚梦1年前 (2017-02-08)回复
  29. #1

    宇哥,可以做个俄罗斯方块的视频吗,想学习一下。

    小德1年前 (2016-11-26)回复
    • 等有时间吧,年底了事情比较多。

      技术胖1年前 (2016-11-27)回复