轻量webpack脚手架 bicycle

why

每次新建工程都要手动搭建基本的webpack项目结构(安装各种loader、编写webpack.config.js等)，一直想打造一个自己的webpack脚手架......

公司里有个现成的脚手架——挖掘机,各种服务都有，所以我们大家都亲切的叫它“挖掘机”，但可惜它涵盖了太多服务，有些是公司业务要求的服务，对于个人项目来说太重了，所以我并不想直接用它。

于是，我还是写个适合自己的webpack脚手架吧。

需求

对于这个脚手架，我觉得它有如下需求

• 使用规范要和公司提供的"挖掘机"差不多(支持多入口开发，支持通用代码打包vendor，自动生成引入chunk的html等)，省得我同时熟悉两套规范

• 简单轻量，不需要提供太多功能，但一定要方便使用

• 能满足我常面对的开发需要，打包线上项目及app内嵌项目及基础组件开发

• 可定制性强，技术盏的升级，不可避免要加入新的功能，因此它必须是容易定制修改的

bicycle 登场

因为公司提供的脚手架叫“挖掘机”，而我自己的脚手架比较轻量，而且我觉得更加方便，所以我给它取名叫 bicycle(自行车) ?

它遵循 挖掘机的开发规范 详见https://github.com/SinaMFE/ma...,

启动脚本，webpack.config等外置，方便定制

我为它加上了 命令行初始化脚本 bicycle-cli,使用起来更加方便

特点&&规范

简单轻量的webpack脚手架——bicycle

功能(feature):

轻松拥有多入口开发（打包时可指定入口）

一键生成基础配置

打包配置脚本结构清晰，易修改，易扩展

可打包app内置页

用法(usage):

npm install bicycle-cli -g

mkdir my-project

cd my-project

bicycle

//create ok !

yarn && yarn run dev/build index/[your entry dir name]

开发目录结构(directory structure)

src
├── ... 可共用资源(common js/css/img/font)
└── entry  多入口开发目录(entrys)
    ├── index  index入口
    │   ├── index.html
    │   └── index.js
    └── list   list入口
        ├── index.html
        └── index.js

注意(notice):

多入口开发时，入口名称由entry下的文件夹名称确定
入口文件必须为index.html
入口js必须为index.js

end

如果你平常开发有和我一样的需求，可以试试 bicycle，有问题直接issue，我会不断改进的 !!!