VIP视频更新:webpack自动化打包工具

千呼万唤始出来,在小伙伴们的强烈要求下,我们的自动化打包工具 webpack 视频终于与大家见面啦~它是一套侧重于实用性的教程, 实用性意味着它可能不太关心这个东西是谁开发出来的,它有什么样的发展历程。 我们可能关心的不太多, 我们关心更多的是我们怎么去使用它,怎么让它来帮助我们解决工作中的问题。

问题

你如果要开发一个项目,你的业务逻辑会非常多, 这个时候你的开发会按照你的功能逻辑拆分成一个一个的模块, 这个时候你开发起来会更加条理清晰, 维护起来也会更方便。这样就会涉及到一个问题, 模块之间会有着复杂的依赖关系,在处理模块依赖的时候, 后端的开发有着得天独厚的条件, 模块化是天生支持的,当一个请求进来的时候,它可以马上同步的去引入模块的依赖,因为所有的代码都在服务器里,想得到什么代码随时可以得到。但对于前端项目来说, 这个时候你会遇到一个问题。你的模块依赖怎么办, 你的代码都是从后端请求过来的,你没办法像后端那样同步的引入代码。

解决

模块打包器会帮你解决这个问题,模块打包器会分析你项目的依赖,然后把他们打包在一起,输出一个新的文件, 你只要让你的项目加载这个文件就可以了。 Webpack天生拥有这种模块打包的能力,它不仅仅能帮你打包 js 的文件, 他还能帮你打包你的所有资源, 你的 css 文件、字体、图片等等这些资源它都会视为模块, 都会进行打包。

拓展

但如果仅仅只是打包东西, 那就太小瞧 webpack 了,webpack 还有着很强大的生态,在打包过程中个, 它有各种各样的 loader 帮你处理文件内容,比如说编译语法,比如说处理路径等等, 它还有各种各样的插件辅助你的开发和项目构建, 从而加快你开发的效率。 如果你在开发一个大型的单页应用, 它的代码分割功能对于页面加载性能的优化是意义非凡的。

它太厉害了, 从项目的起始到打包上线, 它参与了你整个项目的开发周期,陪伴着所有前端人员敲代码的那段时光。

视频地址 :http://2017.miaov.com/v_show/1965

打包初体验

图片的引入

学前基础

  1. 有过 npm 这个包管理器的使用经验;

  2. 了解 commonJS 和 ES6 的模块化语法;

  3. 学习过 React 会学习将事半功倍;

大纲

1、 课程介绍
2、 打包初体验
3、 插件
4、 loader
5、 devServer
6、 引入 CSS 样式
7、 引入图片(1)
8、 引入图片(2)
9、 使用 url-loader 引入图片
10、 引入字体(1)
11、 引入字体(2)
12、 Css 模块化(1)
13、 Css 模块化(2)
14、 Css 模块化(3)
15、 使用 less 和 scss
16、 babel-准备 babel 运行
17、 使用babel插件 和 预设
18、 重新认识 babel-loader
19、 优化一下 babel-loader的配置
20、 输出路径处理
21、 此 publicPath 和彼publicPath

视频地址 :http://2017.miaov.com/v_show/1965


广而告之:《妙味出品的第一本图书 - 献给 WEB 入门者的一份绝佳礼物》


课程咨询:

• 咨询QQ:2852509866、2852509867、2852509868
• 电话:010-57269690

想要了解妙味课堂最新开课消息吗?长按二维码关注吧!

妙味网友
请登录后留言,请登录注册