輕量webpack腳手架 bicycle

jiekechoo 發(fā)布于2019-08-20 18:25 / 1713人閱讀

why

每次新建工程都要手動搭建基本的webpack項目結構(安裝各種loader、編寫webpack.config.js等)，一直想打造一個自己的webpack腳手架......

公司里有個現(xiàn)成的腳手架——挖掘機,各種服務都有，所以我們大家都親切的叫它“挖掘機”，但可惜它涵蓋了太多服務，有些是公司業(yè)務要求的服務，對于個人項目來說太重了，所以我并不想直接用它。

于是，我還是寫個適合自己的webpack腳手架吧。

需求

對于這個腳手架，我覺得它有如下需求

使用規(guī)范要和公司提供的"挖掘機"差不多(支持多入口開發(fā)，支持通用代碼打包vendor，自動生成引入chunk的html等)，省得我同時熟悉兩套規(guī)范

簡單輕量，不需要提供太多功能，但一定要方便使用

能滿足我常面對的開發(fā)需要，打包線上項目及app內(nèi)嵌項目及基礎組件開發(fā)

可定制性強，技術盞的升級，不可避免要加入新的功能，因此它必須是容易定制修改的

bicycle 登場

因為公司提供的腳手架叫“挖掘機”，而我自己的腳手架比較輕量，而且我覺得更加方便，所以我給它取名叫 bicycle(自行車) ?

它遵循挖掘機的開發(fā)規(guī)范詳見https://github.com/SinaMFE/ma...,

啟動腳本，webpack.config等外置，方便定制

我為它加上了命令行初始化腳本 bicycle-cli,使用起來更加方便

特點&&規(guī)范

簡單輕量的webpack腳手架——bicycle

功能(feature):

輕松擁有多入口開發(fā)（打包時可指定入口）

一鍵生成基礎配置

打包配置腳本結構清晰，易修改，易擴展

可打包app內(nèi)置頁

用法(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]

開發(fā)目錄結構(directory structure)

src
├── ... 可共用資源(common js/css/img/font)
└── entry  多入口開發(fā)目錄(entrys)
    ├── index  index入口
    │?? ├── index.html
    │?? └── index.js
    └── list   list入口
        ├── index.html
        └── index.js

注意(notice):

多入口開發(fā)時，入口名稱由entry下的文件夾名稱確定
入口文件必須為index.html
入口js必須為index.js

end

如果你平常開發(fā)有和我一樣的需求，可以試試 bicycle，有問題直接issue，我會不斷改進的 !!!

GPU云服務器云服務器 bicycle 腳手架腳手架使用項目腳手架

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84493.html

Vant 1.0 發(fā)布：輕量、可靠的移動端 Vue 組件庫

摘要：是有贊前端團隊維護的移動端組件庫，提供了一整套基礎組件和業(yè)務組件。一關于距離首次發(fā)布剛好過去了半年時間，在這半年時間里團隊廣泛吸納社區(qū)的反饋和建議，持續(xù)對組件進行打磨優(yōu)化，使得逐漸成長為一個輕量可靠的移動端組件庫。 Vant 是有贊前端團隊維護的移動端 Vue 組件庫，提供了一整套 UI 基礎組件和業(yè)務組件。通過 Vant 可以快速搭建出風格統(tǒng)一的頁面，提升開發(fā)效率。 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月前端月報

摘要：平日學習接觸過的網(wǎng)站積累，以每月的形式發(fā)布。年以前看這個網(wǎng)址概況在線地址前端開發(fā)群月報提交原則技術文章新的為主。平日學習接觸過的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個網(wǎng)址：http://www.kancloud.cn/jsfron... 概況在線地址：http://www.kancloud.cn/jsfront/month/82796 JS前端開發(fā)群月報提交原則：技...

FuisonDesign 2019-08-29 12:35 評論0 收藏0
2017年1月前端月報

摘要：平日學習接觸過的網(wǎng)站積累，以每月的形式發(fā)布。年以前看這個網(wǎng)址概況在線地址前端開發(fā)群月報提交原則技術文章新的為主。平日學習接觸過的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個網(wǎng)址：http://www.kancloud.cn/jsfron... 概況在線地址：http://www.kancloud.cn/jsfront/month/82796 JS前端開發(fā)群月報提交原則：技...

ivyzhang 2019-08-20 16:29 評論0 收藏0