现在许多的项目都是基于webpack来构建的,并且自从webpack提供了中文官网后友好度大大的提高了,但是有些时候想快速开始一个webpack项目却只能把之前项目的一些config配置拿过来改改显得有点麻烦,所以写了一个简易的脚手架(真的很简易!!!)
安装:
$ npm install boarder -g
使用:
$ boarder init <项目名>
$ cd <项目名>
$ npm install
$ npm run dev
初始化的结构目录是这样子的
├── README.md
├── build
│ ├── webpack.base.js
│ ├── webpack.build.js
│ └── webpack.dev.js
├── dist
│ ├── index.html
│ └── static
│ └── js
├── package-lock.json
├── package.json
└── src
├── assets
├── index.html
└── index.js
目录结构还是很简单的
build存放着构建相关的代码src存放着开发相关的代码,初始化了两个文件index.html和index.js,index.js是项目的主入口,如果index.js这个名字不喜欢,那么你修改了最后也要把build-webpack.base.js里面entry的入口名字改掉
功能实现:
- 支持
ES6写法,通过Babel来转换 - 支持小图片自动转Base64
- 支持业务和依赖代码的分离
- 支持热更新
- 支持
Sass,Stylus或者Less - 优化构建速度
css预处理器本身不太想集成,因为每个业务中需要用到的预处理器都是不一样的,但是考虑到常用的预处理器就那么几种,所以接下来也会集成
构建的速度肯定是需要优化的,本身boarder这个包初始化还不是很完善,其实我只要一个目的就是当你没有明确用的框架的时候boarder init一个是可以快速来生成一个webpack项目的,如果有明确的框架,肯定是框架同款的cli好用,比如vue-cli和ng-cli这些
如果你在项目中使用boarder有相关的问题可以给我提issues
boarder issues
webpack模板 issues