Webpac学习指南

全篇共 1465 字。按500字/分钟阅读,预计用时 2.9 分钟。总访问 368 次,日访问 3 次。

不论是自己的个人独立项目,抑或是为公司提供开发服务,Webpack在前端项目开发场景中已经无处不在不可或缺。记录我在使用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了。