webpack4 系列教程: 前言

DevWiki 发布于2019-08-23 10:25 / 1976人阅读

摘要：课程地址全部课程地址立即进入课程源码目录截至按照知识点，目录分成了个文件夹之后还会持续更新。个人网站原文链接系列教程前言

本文档已经过时，最近内容请看：https://godbmw.com/passage/76。一共16节课程和代码。谢谢支持。

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

如果你的自学能力很强，欢迎直接来看源码。仓库地址：https://github.com/dongyuanxi...

如果对您的学习、工作或者项目有帮助，欢迎帮忙 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 个文件夹（之后还会持续更新）。代码和配置都在对应的文件夹下。

demo01: 打包JS

demo02: 编译ES6

demo03: 多页面解决方案--提取公共代码

demo04: 单页面解决方案--代码分割和懒加载

demo05: 处理CSS

demo06: 处理Scss

demo07: 提取Scss (CSS等等)

demo08: JS Tree Shaking

demo09: CSS Tree Shaking

demo10: 图片处理--识别, 压缩, Base64编码, 合成雪碧图

demo11: 字体文件处理

demo12: 处理第三方JS库

demo13: 生成Html文件

demo14: Watch Mode && Clean Plugin

demo15: 开发模式--webpack-dev-server

demo16: 生产模式和开发模式分离

4. 致谢

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

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96317.html

webpack-demos：全网最贴心webpack系列教程和配套代码

摘要：全网最贴心系列教程和配套代码欢迎关注个人技术博客。所以我花费了个多月整理了这份教程，一共分成节，每节都有讲解，并且准备了配套代码。奈何深感水平不够，只有一腔热情，所以直接开放了教程和源码。 webpack-demos：全网最贴心 webpack 系列教程和配套代码欢迎关注个人技术博客：godbmw.com。每周 1 篇原创技术分享！开源教程(webpack、设计模式）、面试刷题（偏前...

LMou 2019-08-23 12:25 评论0 收藏0
webpack4系列教程（八）：使用Eslint审查代码

摘要：使用配置完成，如何使用呢在文件中添加一条代表需要解析的文件格式，最后接上文件路径，由于我们的主要代码都在目录下，这里就配置文件夹。前言：本章内容，我们在项目中加入eslint配置，来审查校验代码，这样能够避免一些比较低级的错误。并且在团队协作的时候，保持同一种风格和规范能提高代码的可读性，进而提高我们的工作效率。安装： eslint-config-standard 是一种较为成熟...

Chiclaim 2019-08-23 14:44 评论0 收藏0
webpack4系列教程（十）：总结

摘要：传送门系列教程一初识系列教程二创建项目，打包第一个文件系列教程三自动生成项目中的文件系列教程四处理项目中的资源文件一系列教程五处理项目中的资源文件二系列教程六使用分割代码系列教程七使用系列教程八使用审查代码系列教程九开发环境和生产环境在前端开发日益复杂的今天，我们需要一个工具来帮助我们管理项目资源，打包、编译、预处理、后处理等等。webpack的出现无疑是前端开发者的福音，我的博文只...

hqman 2019-08-26 13:29 评论0 收藏0
webpack4 系列教程(六): 处理SCSS

摘要：只需要在处理的配置上增加编译的即可。了解更多处理的内容本节课源码所有课程源码教程所示图片使用的是仓库图片，网速过慢的朋友请移步原文地址系列教程六处理。根据规则放在最后的首先被执行。这节课讲解webpack4中处理scss。只需要在处理css的配置上增加编译scss的 LOADER 即可。了解更多处理css的内容 >>> >>> 本节课源码 >>> 所有课程源码教程所示图片使用的是...

马龙驹 2019-08-23 11:33 评论0 收藏0
webpack4 系列教程(十六)：开发模式和生产模式·实战

摘要：作者按这是系列最后一篇教程了。这篇文章在之前所有教程的基础上，做了一个真正意义上的项目我花费了三个月整理了这份教程，并且完善了相关示例代码，也更熟悉的理论和应用，当然，也感谢大家的支持。好了，感慨完毕，开始正题作者按:这是webpack4系列最后一篇教程了。这篇文章在之前所有教程的基础上，做了一个真正意义上的 webpack 项目！我花费了三个月整理了这份教程，并且完善了相关示例代...

snifes 2019-08-23 12:27 评论0 收藏0