第 9 阶段:搞懂、搞透前端构建第 9 天
最近由于休假,晚上会有一些时间,争取把 webpack 这阶段更新完。
对于一个 30+ 的前端团队来说,前端项目可能有 50+ 个,如果每个项目单独管理 webpack 配置文件(webpack.dev.js 这类文件),如果遇到 webpack 升级、webpack 性能优化或其它因素时,修改 webpack 配置文件,需要耗费很大的人力。而且很难保证配置文件统一。
基于以上背景,我们来解决上面遇到的问题。
可以通过创建 npm 包让前端各个项目复用代码,我们可以把 webpack 的配置文件做成 npm 模块,这样就解决了上面遇到的问题,当创建新项目的时候,也不至于复制其它项目中 webpack 的配置文件,直接使用 npm 模块即可。这里我创建了三个 webpack 配置文件,配置文件中具体需要那些内容,视自身项目而定:
1、创建 webpack.base.js
base 用来处理各个 webpack 文件中共用的配置,主要做下面这些事情:
1>、解析 ES6;
2>、解析 css 预处理,比如 less、scss、stylus;
3>、解析图片、字体;
4>、解析主要的开发框架,比如 Vue、React;
5>、多页面入口;
6>、output 定义;
7>、html 模板处理;
下面是一个简单的 base 配置: