基于Webpack构建前端页面

原文作者：陈帅华-探索技术艺术与国学之美

原文链接：http://www.shuaihuajun.com/article/webpack-build-spa/

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

出自苏打绿《喜欢寂寞》

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

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

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

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()

开始监听文件变化并编译：

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

我将构建页面的命令行发不到

npm

上，spab-cli需要全局安装，spab安装到本地即可。

使用

spab build

命令将编译一次，使用

spab watch

将监听文件变化，当文件发生变化执行编译。