開箱即用的多頁面腳手架, 基于webpack4.2x babel7.1x

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規范導出導入
  • 頁面公用css,全部需要在公用base.js引入(便于webpack處理),詳情,然后每個頁面引入base.js詳情

  • 頁面開發跳轉頁面都是基于打包后輸出的絕對路徑進行編寫 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="">
  • 頁面header配置位置(即nav導航欄配置)詳情
  • 頁面footer配置位置(即footer底部欄配置)詳情

目錄介紹 (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 展示好看...屬于優化項
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容