webpack4 系列教程: 前言
程序员文章站
2023-08-26 14:51:57
1. 什么是 ? 前端目前最主流的 打包工具,在它的帮助下,开发者可以轻松地实现加密代码、多平台兼容。而最重要的是,它为 前端工程化 提供了最好支持。 、`react`等大型项目的脚手架都是利用 webpack 搭建。 所以,学习 可以帮助开发者更好的进行基于 语言的开发工作。 2. 怎么学习 ? ......
1. 什么是webpack
?
前端目前最主流的
javascript
打包工具,在它的帮助下,开发者可以轻松地实现加密代码、多平台兼容。而最重要的是,它为前端工程化提供了最好支持。vue
、react
等大型项目的脚手架都是利用 webpack 搭建。
所以,学习webpack
可以帮助开发者更好的进行基于javascript
语言的开发工作。
2. 怎么学习webpack
?
如果一个新手不幸打开vue-cli
中关于webpack
的配置,乱起八糟的配置就像看天书一样(我就是这样)。
所以,学习的时候还是要从基础学起,首先应该学习常用的概念、插件的用法,最后,才能根据需要进行组合。
因此,这个系列教程先从JS
、编译ES6
等方面讲起,逐步延伸到CSS
、SCSS
等,再到多页面、懒加载等技术,力求将知识点解构,而不是混淆在一起。
3. 关于本课程
3.1 webpack
版本
本课程不同于网上的v3
版本,采用最新的webpack4
。并且会记录v3 -> v4
升级过程中的一些问题。
3.2 课程源码
如果你的自学能力很强,欢迎直接来看源码。:
如果对您的学习、工作或者项目有帮助,欢迎帮忙 Star,更欢迎一起维护。
3.3 课程地址
3.4 课程源码目录 (截至 2018/7/27)
按照知识点,目录分成了 16 个文件夹(之后还会持续更新)。代码和配置都在对应的文件夹下。
- : 打包
JS
- : 编译
ES6
- : 多页面解决方案--提取公共代码
- : 单页面解决方案--代码分割和懒加载
- : 处理
CSS
- : 处理
Scss
- : 提取
Scss
(CSS
等等) - : JS Tree Shaking
- : CSS Tree Shaking
- : 图片处理--识别, 压缩,
Base64
编码, 合成雪碧图 - : 字体文件处理
- : 处理第三方
JS
库 - : 生成
Html
文件 - :
Watch
Mode && Clean Plugin - : 开发模式--
webpack-dev-server
- : 生产模式和开发模式分离
4. 致谢
此教程是在我学习 mooc 网 整理的代码和v4.0
版本的升级教训。欢迎大家去学习。
欢迎技术交流,引用请注明出处。
个人网站:
原文链接:
上一篇: PS滤镜制作漂亮的七彩漩涡
下一篇: PS制作马赛克拼贴纹理的LOGO展示模板
推荐阅读
-
Spring MVC温故而知新系列教程之请求映射RequestMapping注解
-
C#温故而知新系列教程之闭包
-
Spring MVC温故而知新系列教程之从零开始
-
Spring温故而知新系列教程之AOP代理
-
Microsoft .Net Remoting系列教程之三:Remoting事件处理全接触
-
Microsoft .Net Remoting系列教程之二:Marshal、Disconnect与生命周期以及跟踪服务
-
Microsoft .Net Remoting系列教程之一:.Net Remoting基础篇
-
Spring MVC温故而知新系列教程之请求映射RequestMapping注解
-
C#温故而知新系列教程之闭包
-
解读ASP.NET 5 & MVC6系列教程(1):ASP.NET 5简介