相信大家对 Webpack
绝不陌生,它已经成为了现在前端工程化中最重要的一环,通过 Webpack
与 Node
的配合,前端领域完成了不可思议的进步,现有的先进理念,例如组件化、模块化ES6/ES7
等等,其实都是基于工程化的预编译来完成的。深入理解Webpack
,可以让你在编程思维及技术领域上产生质的成长。
由于前段时间想要实践自己的一些想法,需要去开发Loader
,刚开始也是一脸懵逼,网上的资料也是寥寥无几,不够系统,而本文是手把手教大家开发一款Loader
,希望能对大家有所帮助。
工程化,其实大家可以将其理解成:对代码进行预编译。例如现在ES6/7
的普及,其实就是通过babel-loader
在编译阶段将我们写的ES6
代码编译成了ES5
。而预编译,讲人话其实就是,打开你的代码文件,获取你写的代码字符串,然后进行定向的修改。
因此,大家可以把Webpack
理解成一个代码预编译工厂,其实它的本质是规范了这么一套生产规则,Loader
是工厂中的一个个流水线工人,而Plugin
则可以看成是一个流水线的管理,可以控制流水线的行为。他们按顺序一步一步对代码进行加工,最终生产出能直接运行在浏览器中的代码。