vue,angular4,react 之webpack搭建

前端三大框架基礎專案

• webpack3 + typescript+react

https://github.com/githbq/hbq-typescript-react-boilerplate.git
支援typescript + react16 + react-router V3

• webpack3 + babel(es6+) + react

https://github.com/githbq/hbq-simple-webpack2-react.git

• webpack3 + typescript+vue2

https://github.com/githbq/hbq-typescript-vue-boilerplate.git

• webpack3 + typescript+angular4

https://github.com/githbq/hbq-angular-boilerplate.git

特點

1. 支援多入口頁面自動生成

• 在 src/apps/ 目錄下會建立 .ts 或者 react 下 .tsx 會自動生成 .html 檔案
• 自定義html模板: src/apps 下建立與 tsx? 同名的 [name].html , [name].pug
• 優先使用自定義模板,否則使用dev-config/index.template.pug 作為 htmlWebpackPlugin 模板

2. 同時支援ejs 與 pug 作為 htmlWebpackPlugin 模板

3. 同時支援 stylus 與 less 編寫樣式

4. 自動構建目錄在 dev-config 目錄下,配置檔案完全解耦

├── dev-config
|  ├── configs
|  |  ├── alias.js
|  |  ├── constants.js
|  |  ├── devServer.js
|  |  ├── entry.js
|  |  ├── globalConfig.js
|  |  ├── plugins.html.js
|  |  ├── plugins.js
|  |  ├── proxy.js
|  |  ├── rules.css.js
|  |  ├── rules.js
|  |  └── utils.js
|  ├── index.template.html
|  ├── index.template.pug
|  ├── lite-server-config.js
|  ├── readme.md
|  ├── templateCompilers
|  |  └── pug.js
|  └── webpack.config.js

5. hmr(hot module replace) 程式碼修改熱更新支援

安裝

1. 直接 git clone 對應的git倉庫地址

2. 採用 iclone-cli 腳手架

npm i -g iclone-cli 
// then 
iclone init -t  [模板名稱] -n [工程名稱]   

環境要求

nodejs v8.4

win nodejs v8.4 百度雲盤下載連結 http://pan.baidu.com/s/1bpD78YF
mac 系統直接使用 n latest獲取最新版本即可

開發工具安利

VSCODE : 這真的很快很好用

win vscode 最新版 x64-1.16.0 百度雲盤下載連結 http://pan.baidu.com/s/1bpB5FEf

本人其它模板專案

• koa2 + typescript + mongodb

https://github.com/githbq/hbq-koa2-base.git

• nodejs command line

https://github.com/githbq/hbq-module-cli-boilerplate.git

• gulp (css js less ts gzip)

https://github.com/githbq/hbq-gulp.git

TODO

• README.md 文件還沒有寫好,挨個寫清楚
• 前端單元測試待加入
• 編寫typescript 開發相關文件

歡迎大家提意見!