Webpack-seed
開箱即用的多頁面腳手架, 基于webpack4.2x babel7.1x模塊化開發(fā)可復(fù)用的現(xiàn)代化網(wǎng)站(Without Vue Angular React)
預(yù)覽
如果感興趣該項(xiàng)目, 請點(diǎn)個 star
及時關(guān)注項(xiàng)目更新, 請點(diǎn)個 watch
特性 （Feature）
- 支持前后端分離開發(fā)
- 配置完整的打包方案
- 支持本地開發(fā)熱更新
- 集成代碼風(fēng)格校驗(yàn)Eslint
- ES6編寫源碼，編譯生成生產(chǎn)代碼
- 開發(fā)(生產(chǎn))環(huán)境代碼自動注入頁面, 專注于開發(fā)
- 編譯后的程序不依賴于外部的資源, 可放到CDN
使用指南 （Usage）
下載使用
git clone https://github.com/BiYuqi/webpack-seed.git
cd webpack-seed
npm install
本地開發(fā)(dev)
npm run dev
打包(build)
- 默認(rèn)情況下，該配置方案假設(shè)你的應(yīng)用是被部署在一個域名的根路徑上例如 https://www.my-app.com/
- 如果應(yīng)用被部署在一個子路徑上，你就需要用這個選項(xiàng)指定這個子路徑
- 例如，如果你的應(yīng)用被部署在 https://www.my-app.com/my-app/
- 則設(shè)置 webpack的output.publicPath 為 /my-app/
- 本項(xiàng)目由于需要臨時部署在git-pages預(yù)覽 所以改配置臨時改為/webpack-seed/
- 普通打包(大部分) npm run build 默認(rèn) '/'
- 該命令具體請看package.json scripts命令配置
- 配置詳情
- scripts命令配置
- 預(yù)覽
// 普通打包(大部分) npm run build publicPath默認(rèn) '/'
npm run build
// 打包時 npm run build:git 該命令會打包的路徑會自動帶上github項(xiàng)目地址/webpack-seed/
//(當(dāng)發(fā)布環(huán)境不是服務(wù)器根路徑，都可以采用該方案，只需更改路徑名稱即可，本項(xiàng)目二級路徑為webpack-seed)
npm run build:git
開發(fā)規(guī)范 （Standard）
import引入 export導(dǎo)出 具體請參考 ES6 module語法
/**
* 每個頁面(模板)都必須包含(基礎(chǔ))以下文件
*/
index.js // (業(yè)務(wù)邏輯代碼入口)
tpl.js // (模板拼裝入口)
模塊名.ejs // (頁面編寫入口)
/**
* 以下可根據(jù)自己需要添加
* 模塊下可以建立文件目錄用來填寫業(yè)務(wù)代碼,上述只是基礎(chǔ)規(guī)范，擴(kuò)展性比較強(qiáng)
* /
eg:
src/views/about/ 在該目錄下創(chuàng)建文件夾/aboutCom
---- a.js 業(yè)務(wù)a代碼
---- b.js 業(yè)務(wù)b代碼
都是需要通過ES6規(guī)范導(dǎo)出導(dǎo)入
頁面開發(fā)跳轉(zhuǎn)頁面都是基于打包后輸出的絕對路徑進(jìn)行編寫 html/模塊.html 詳情
全部采用模塊化開發(fā)，每個模塊都是一個文件夾 詳情 (開發(fā)環(huán)境views下創(chuàng)建)
該文件夾包含 模塊模板寫頁面(模塊名.ejs) + 模板混合(tpl.js) + index.js（該模塊業(yè)務(wù)邏輯） 打包后會自動注入，無需手動引入js文件 詳情
各個js功能模塊之間互相引用，一律使用ES6語法
樣式編寫基于各模塊入口js直接 import '樣式地址 ' 參考
頁面(.ejs)--圖片引入方式 詳情
assets是webpack resolve配置好的別名，代表assets目錄
<img src="<%= require('assets/image/demo.png') %>" alt="">
目錄介紹 （Introduction）
- build/
- ---config.js 開發(fā)，打包基礎(chǔ)配置
- ---utils.js 多入口，多頁面基礎(chǔ)配置
- ---webpack.base.config.js 基礎(chǔ)配置
- ---webpack.dev.config.js 開發(fā)環(huán)境
- ---webpack.prod.config.js 打包環(huán)境
- src/
- ---common/ 項(xiàng)目公用資源（圖片, 各種工具等）
- ----------------libs.js 第三庫自動渲染到頁面(此處配置的靜態(tài)資源,會自動注入到頁面) 配置 自動注入源碼 底層實(shí)現(xiàn)
- ---components 項(xiàng)目模板 （復(fù)用的頁面片段,目前該模板已趨于穩(wěn)定，細(xì)節(jié)樣式需調(diào)整）
- ---layout/ 項(xiàng)目結(jié)構(gòu)模板 (供各個子模塊調(diào)用，后續(xù)可擴(kuò)展多樣化模板,可以添加不帶側(cè)邊欄的模板等)
- ----------------layout 默認(rèn)模板（header+footer）
- ----------------layout-without-nav [可以添加類似模板] #todo
- ---views/ （模塊開發(fā)文件夾)
- ----------------子模塊，各種模塊頁面
- ---vendor/ 第三方庫存放在此
輸出目錄 （Output）
- dist/
- ---html
- ---image
- ---media
- ---css
- ---js
- ---lib
- ---index.html
注意：如果有音視頻等，會被打包在media目錄
TODO
- [x] 添加ejs模板，進(jìn)行頁面(首尾)復(fù)用（ejs在本項(xiàng)目中目前只做模板引用，具體頁面目前只能寫html,后期考慮增加模板支持，暫定art-template art-template中文文檔）
- [x] mini-css-extract-plugin 提取js內(nèi)引入scss文件失敗, 打包后依然在js文件（已解決）
- [x] 首頁頁面模板未完成（單獨(dú)處理打包）
- [x] 添加第三方庫以鏈接的方式引入
- [x] 增加ESLint代碼校驗(yàn)
- [x] 增加兩個文件夾，一個是fix IE兼容, 一個是引入的公用庫，自動加載第三方庫到頁面，避免手動填寫
- [ ] 添加多樣化layout模板支持(示例)
- [ ] 添加完整網(wǎng)站demo示例
- [ ] 添加doc使用說明以及實(shí)現(xiàn)思路解析
LONG TODO（Base on master）
- [ ] 建立分支web-system（后臺管理系統(tǒng)模板）, web-pc (大眾網(wǎng)站模板), web-mobile(移動端模板)
實(shí)現(xiàn)思路 （Ideas）
- build/utils.js 為js, html多入口邏輯方法
- ejs目前僅僅是共用(比如header, footer, nav, sidebar)部分整合, 模塊開發(fā)暫不支持動態(tài)數(shù)據(jù)
- 每個js就是一個入口
- 每個入口打包為一個html頁面(自動注入相關(guān)js)
- TODO 待有空仔細(xì)講解下具體實(shí)現(xiàn)
更新日志 (Update log)
2018.10.11
- 靜態(tài)資源vendor文件夾分類，common與fixIe 這兩個文件夾的文件都會被自動注入到頁面引用; 使用者只需要配置lib.js即可
2018.10.11
- 單獨(dú)抽離css樣式問題修復(fù)
2018.10.07
- 修改打包后js輸出路徑，原有js跟著頁面文件夾打包后在一起, 現(xiàn)在統(tǒng)一打包到dist/js目錄下, 理由是頁面script 展示好看...屬于優(yōu)化項(xiàng)
