欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

webpack4 系列教程: 前言

程序员文章站 2023-08-26 14:51:57
1. 什么是 ? 前端目前最主流的 打包工具,在它的帮助下,开发者可以轻松地实现加密代码、多平台兼容。而最重要的是,它为 前端工程化 提供了最好支持。 、`react`等大型项目的脚手架都是利用 webpack 搭建。 所以,学习 可以帮助开发者更好的进行基于 语言的开发工作。 2. 怎么学习 ? ......

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 课程源码

如果你的自学能力很强,欢迎直接来看源码。:

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

3.3 课程地址

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

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

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

4. 致谢

此教程是在我学习 mooc 网 整理的代码和v4.0版本的升级教训。欢迎大家去学习。

欢迎技术交流,引用请注明出处。
个人网站:
原文链接: