|
工作之余写了一个简单的基于webpack的纯净版支持单页/多页应用的脚手架。
项目地址：https://github.com/keaderzyp/multi-webpack
主要由于目前前端市场脚手架基于webpack开发多数趋于免配置化，将webpack部分复杂的配置关系抽象到了依赖层，导致很多工作经验少的同学脱节比较严重，由于webpack本身的规模过于庞大，很多人疲于学习选择成熟的脚手架，以至于很多同学虽然更专注前端框架的业务开发了，但是基础内容脱离的越来越远。
所以作者在工作之余提供了一份简易的基于webpack搭建的脚手架
首先介绍目录结构
该目录结构主要分两部分
public（静态资源+网页模版）
src（源代码）
在src里可以使用CommonJS以及ES6+的各种语法
在public里要遵循浏览器js规范
通过babel编译后生产代码会输出到dist目录，
整个public中的静态资源会一同被输入到dist目录
public中的静态资源不参与webpack构建
src中的entrys为多页/单页入口文件夹
入口文件如果是单页就创建一个js文件，同时在pubic目录下要创建一个同名的html文件
如果是多页面应用可创建多个js文件同时在public目录必须创建一一对应的同名html文件
本项目已引入ejs-loader
所以在public中的html文件可以使用ejs语法将html文件拆分拼接，使用ejs模版进行部分静态值的处理
由于devserver非express等服务器，在打包构建后产生的页面内容为编译整合完的html完整文件
所以虽然可以使用ejs部分语法，不要在html中使用服务器动态数据，否则构建会产生异常
脚手架除了支持在src中引入npm安装的依赖以外
还支持在public中引入其他js依赖
如在项目中使用jq等js可在public中放入依赖min文件
并在html中以相对路径的形式引入
到此步骤后即可在html内的js脚本域使用jquery
如果在src开发代码中使用jquery
需要在webpack.base.js中使用externals来进行免构建引入
如图
在src中使用方式为
如此用法在构建时不会将jquery依赖注入到构建结果
并且在build之后静态资源会自动注入到dist中保证正常使用无问题
其他引入方式请自行参阅项目内容
贴上项目地址：
https://github.com/keaderzyp/multi-webpack
本脚手架为基础脚手架
在内部默认使用了常用的部分loader和plugin
如需要特殊功能请自行修改webpack配置文件，
发布文章的目的为记录学习，并分享知识。
更多的webpack知识请参阅webpack官方网站，上面内容应有尽有
| 
转播
