1. 什么是webpack?

前端目前最主流的javascript打包工具,在它的帮助下,开发者可以轻松地实现加密代码、多平台兼容。而最重要的是,它为前端工程化提供了最好支持。vuereact等大型项目的脚手架都是利用 webpack 搭建。

所以,学习webpack可以帮助开发者更好的进行基于javascript语言的开发工作。

2. 怎么学习webpack?

如果一个新手不幸打开vue-cli中关于webpack的配置,乱起八糟的配置就像看天书一样(我就是这样)。

所以,学习的时候还是要从基础学起,首先应该学习常用的概念、插件的用法,最后,才能根据需要进行组合。

因此,这个系列教程先从JS、编译ES6等方面讲起,逐步延伸到CSSSCSS等,再到多页面、懒加载等技术,力求将知识点解构,而不是混淆在一起

3. 关于本课程

3.1 webpack版本

本课程不同于网上的v3版本,采用最新的webpack4。并且会记录v3 -> v4升级过程中的一些问题。

3.2 课程源码

如果你的自学能力很强,欢迎直接来看源码。仓库地址https://github.com/dongyuanxin/webpack-demos

如果对您的学习、工作或者项目有帮助,欢迎帮忙 Star,更欢迎一起维护。

3.3 课程地址

全部课程地址: >>> 立即进入: https://godbmw.com/search?category=webpack4%20%E7%B3%BB%E5%88%97%E6%95%99%E7%A8%8B

3.4 课程源码目录 (截至 2018/7/27)

按照知识点,目录分成了 16 个文件夹(之后还会持续更新)。代码和配置都在对应的文件夹下。

  1. demo01: 打包JS
  2. demo02: 编译ES6
  3. demo03: 多页面解决方案--提取公共代码
  4. demo04: 单页面解决方案--代码分割和懒加载
  5. demo05: 处理CSS
  6. demo06: 处理Scss
  7. demo07: 提取Scss (CSS等等)
  8. demo08: JS Tree Shaking
  9. demo09: CSS Tree Shaking
  10. demo10: 图片处理--识别, 压缩, Base64编码, 合成雪碧图
  11. demo11: 字体文件处理
  12. demo12: 处理第三方JS
  13. demo13: 生成Html文件
  14. demo14: Watch Mode && Clean Plugin
  15. demo15: 开发模式--webpack-dev-server
  16. demo16: 生产模式和开发模式分离

4. 致谢

此教程是在我学习 mooc 网 四大维度解锁 Webpack3.0 工具全技能 整理的代码和v4.0版本的升级教训。欢迎大家去学习。

欢迎技术交流,引用请注明出处。
个人网站:GodBMW.com
原文链接:webpack4 系列教程: 前言

最新文章

  1. delphi Style TBitmapLink
  2. sqlserver 2008 数据库表结构脚本及数据导出
  3. CKplayer功能配置
  4. MSN
  5. 使用SMSManager短信管理器实现短信群发
  6. 2-1-1 GDI
  7. 清空FORM表单的几种方式 Reset 重加载
  8. POJ3617 Best Cow Line
  9. python-Pickle序列化
  10. 50 Pow(x, n)(求x的n次方Medium)
  11. oracle中查找执行效率低下的SQL
  12. 01.由浅入深学习.NET CLR 基础系列之CLR 的执行模型
  13. markdown 自定义一个锚点
  14. mxml日期显示使用
  15. Redis的7个应用场景
  16. C# 初识Redis
  17. 样式初始化(copy)
  18. Spring 获取bean 几种方式
  19. Filter中request对象强转问题
  20. Markdown字体大小与颜色

热门文章

  1. PLSQL基础知识-图片
  2. Delphi Excel导入 的通用程序转载
  3. javascript实现二分法
  4. LeetCode--No.006 ZigZag Conversion
  5. 机器学习与Tensorflow(7)——tf.train.Saver()、inception-v3的应用
  6. 【LeetCode】13. 罗马数字转整数
  7. 【PaddlePaddle】自然语言处理:句词预测
  8. 安装apache 后,找不到服务,解决办法
  9. 关于jquery中prev()和next()的用法
  10. Thread,ThreadPool,Task, 到async await 的基本使用方法和理解