Webpack 教程

webpack教程 姜瑞涛的官方网站

这是针对新人的零基础Webpack教程。

若你是第一次接触Webpack,也许会像三年前的我一样,迷惑与不解。

我是2016年的年底第一次接触Webpack,当时公司项目用的构建工具还不是Webpack,而技术社区已经渐渐流行用Webpack构建前端工程了。当时还没有完整的Webpack相关的教程,当时的官方文档也并不容易理解。于是自己找了一些文章,尝试学习了一下。不过,那会儿没有学明白。因为Webpack是基于Node.js的,自己当时也不会Node.js,于是又开始学习Node.js……

当时我对整个Webpack是困惑的,之后又做了很长时间 开发后,才渐渐对Webpack有了一些认知。但是我还是不会使用Webpack进行项目开发,从 Webpack1.0到Webpack4.0,版本一更新,学过的知识就面临淘汰。因为版本更新,技术社区的文章内容有些也是被淘汰的,但你自己通常是不知道的。

Webpack杂乱的的体系,学习成本较高的官方文档,给了我们这些初学者很大的学习难度(其实和我写Babel教程的原因类似)。

三年时间过去了,自己对Webpack也越来越熟悉了。这中间也走了很多弯路,比如,要掌握Webpack的常规配置其实不需要深入学习Node.js的,只需要会几个Node的模块函数就可以了。

现在是做前端开发的第五年了,我发现Webpack官方文档的学习成本还是比较高的。于是便写了这份教程,希望能对 JavaScript 开发者有所帮助。

本教程主要使用的Webpack版本是v4.46.0,对整个4.x版本都适用。同时,会对一些4.0.0版本之前流行的loader与plugin做简单介绍,以方便阅读社区的文章。对于v5.0版本的Webpack会再单独写一份教程。当然,在学习本教程的时候,推荐大家使用教程里的版本。

2021年5月注:本教程最初是为Webpack4版本写的,因为Webpack5正式版已发布一段时间了,现决定这份Webpack4的教程内容暂时不再更新,之后将发布Webpack5的教程,这将是一份完整的教程。

另外推荐阮一峰的ES6教程,Webpack3的实体书可以看一下吴浩麟的书,Webpack4的书可以看一下居玉皓的书。

笔记与思考

发表评论

邮箱地址不会被公开。 必填项已用*标注