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