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会再单独写一份教程。当然,在学习本教程的时候,推荐大家使用教程里的版本。

-----------------------------------------------------------------

2022年1月注:

《Webpack+Babel入门与实例详解》将由电子工业出版社出版,这是一本针对零基础前端开发者讲解Webpack与Babel使用方法的图书。

本书由两大部分构成,第一部分介绍Webpack,第二部分介绍Babel。Webpack部分讲解了Webpack的安装、资源入口与出口、预处理器与插件的配置、开发环境与生产环境的配置、性能优化及构建原理等。Babel部分讲解了Babel入门知识、Babel的配置文件、预设与插件的选择、babel-polyfill的使用方法,以及@babel/preset-env和@babel/plugin-transform-runtime这两个核心配置项的使用方法,这一部分还会讲解Babel的原理及Babel插件的开发。最后,在附录中介绍了Module Federation与微前端,以及Babel 8前瞻等内容。
本书中主要使用的Webpack版本是v5.21.2,但对v5.0.0之后的版本都适用;主要使用的Babel版本是v7.13.10,但对v7.0.0之后的版本都适用。

本书的内容是对网站教程内容做了一次升级,也增加了原理方面的讲解,对原理方面感兴趣的读者可以购买该书。

另外,已与出版社沟通,本网站已发表的内容不会删除,大家还可以继续阅读已有的教程。

-------------------------------------------------------------------

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

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

笔记与思考

发表评论

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