谈谈前端构建工具webpack

当前端项目做多了之后,每次开始一个新前端项目,我都会配置几乎和之前无差别的开发和前端代码构建环境,虽说温故而知新,可量变最终是要质变的。为了解决我这一痛点以及喜欢尝试新鲜事物的心态,但又不想直接套用那些对学习具有核心价值的前端知识没多大益处的现成框架,于是自己花时间造一个适合我技术栈的轮子。

与另辟蹊径无关,关于走别人走过的路,我这么想;“老人有老作为,新人有新成就”——《瓦尔登湖》。或许你亲自尝试后就能有新发现。哪怕为了获得新体验取悦自己。不亲自体味一遍其中滋味,怎么敢大言不惭地说感同身受,怎么敢说你懂?

其实我的想做的东西很单纯,将用于构建前端代码的配置的和与业务相关的代码分离。用于构建的代码和具体前端业务的代码通过一个页面配置清单联结。所有业务涉及到的页面都能在这份清单中找到相应的记录。

组成这份清单的基本单元是页面,每一个页面由一系列与页面相关的配置项目构成,一个页面最主要的两个配置项包含两项:

  1. 结构模板
  2. 其它资源

其中其它资源包含除HTML结构模板以外的超文本内容:

  1. JavaScript脚本
  2. CSS样式
  3. 图片
  4. 其它

处理JavaScript可以使用babel-loader或者ts-loader,处理CSS可以使用scss-loader或者css-loader,对于其它资源,可以借助***-loader预处理器处理。

单个项目包含许多页面及页面配置项

一个配置清单可以容纳的项目数应该是无上限的,这个要开发者自己抉择可以容纳的项目数量,如果清单中的项目过多,会出现混乱的问题,如果使用界面操作的方式管理项目,以及每个项目的每一个页面,还有每一个页面的配置,可以大大提升前端开发环境配置效率。这件事我会在接下来考虑。

一份清单中包含多个项目

NodeJS中使用webpack时,将清单中的所有项目按webpack要求格式的配置对象组传入webpack()函数中,将返回webpack编译器的实例,该实例包含两个方法,一个是compiler.run()编译一次,一个是compiler.watch()开始监听文件变化并编译:

const webpack = require('webpack')
compiler = webpack([...])
compiler.run()
// compiler.watch()

我将构建页面的命令行发不到npm上,spab-cli需要全局安装,spab安装到本地即可。

使用spab build命令将编译一次,使用spab watch将监听文件变化,当文件发生变化执行编译。

但后来发现这样做会让可配置性变得极。针对单一项目,其大范围重构且成功的可能性并不大,不如推翻重写。而脑子是个好东西,于是我不再更新spabspab-cli两个npm包。

webpack中的核心功能有两个,一个是Plugins,一个是Loaders,而配置webpack围绕的只有四件事:

  1. 控制入口文件;
  2. 设置输出位置;
  3. 加载转换特定类型的文件;
  4. 监控整个编译生命周期。

理解了这些,就可以使用灵活运用webpack了。

授权账号 » 
原创声明 » 未经授权,请勿复制转载,谢谢配合
联系方式 » 
微信:huazi19930927
邮箱:lanserdi@163.com
发布日期 » 2019年7月23日 周二
Github账号登录以留言