轻量webpack脚手架 bicycle

jiekechoo 发布于2019-08-20 18:25 / 1712人阅读

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，我会不断改进的 !!!

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84493.html

Vant 1.0 发布：轻量、可靠的移动端 Vue 组件库

摘要：是有赞前端团队维护的移动端组件库，提供了一整套基础组件和业务组件。一关于距离首次发布刚好过去了半年时间，在这半年时间里团队广泛吸纳社区的反馈和建议，持续对组件进行打磨优化，使得逐渐成长为一个轻量可靠的移动端组件库。 Vant 是有赞前端团队维护的移动端 Vue 组件库，提供了一整套 UI 基础组件和业务组件。通过 Vant 可以快速搭建出风格统一的页面，提升开发效率。 showImg(...

Prasanta 2019-08-22 15:32 评论0 收藏0
引言下面是一个使用脚手架来初始化项目的典型例子。 showImg(https://segmentfault.com/img/remote/1460000019219651?w=1312&h=533); 随着前端工程化的理念不断深入，越来越多的人选择使用脚手架来从零到一搭建自己的项目。其中大家最熟悉的就是create-react-app和vue-cli，它们可以帮助我们初始化配置、生成项目结构、自...

AnthonyHan 2019-08-26 13:49 评论0 收藏0
2017年1月前端月报

摘要：平日学习接触过的网站积累，以每月的形式发布。年以前看这个网址概况在线地址前端开发群月报提交原则技术文章新的为主。平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 概况在线地址：http://www.kancloud.cn/jsfront/month/82796 JS前端开发群月报提交原则：技...

FuisonDesign 2019-08-29 12:35 评论0 收藏0
2017年1月前端月报

摘要：平日学习接触过的网站积累，以每月的形式发布。年以前看这个网址概况在线地址前端开发群月报提交原则技术文章新的为主。平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 概况在线地址：http://www.kancloud.cn/jsfront/month/82796 JS前端开发群月报提交原则：技...

ivyzhang 2019-08-20 16:29 评论0 收藏0