基於webpack4.x, babel7.x 搭建的多頁面腳手架, 簡化前端開發流程，專注於開發可複用的現代化網站

Webpack-seed

開箱即用的多頁面腳手架, 基於webpack4.2x babel7.1x模塊化開發可複用的現代化網站(Without Vue Angular React)

特性 （Feature）

• 支持前後端分離開發
• 配置完整的打包方案
• 支持本地開發熱更新
• 集成代碼風格校驗Eslint
• 支持ES6編寫源碼，編譯生成生產代碼
• 內置sass開發環境，自動加樣式前綴,自動編譯css && 注入到頁面
• 開發(生產)環境代碼自動注入頁面, 專注於開發
• 編譯後的程序不依賴於外部的資源, 可放到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底部欄配置)詳情
• 頁面header footer業務邏輯(即兩者公用js)建議寫在common/js該文件下, 統一由base.js注入示例
• 頁面支持ejs模板開發,模板文件建議統一規劃到一個文件夾(本項目目前放在templates/注:views/目錄只能放頁面模塊，不可放模板) 具體請看 模板 使用

目錄結構 （Source）

• build/
• ---config.js 開發，打包基礎配置(包含輸出文件名, 路徑配置等都在此配置)
• ---utils.js 多入口，多頁面基礎配置
• ---webpack.base.config.js 基礎配置
• ---webpack.dev.config.js 開發環境
• ---webpack.prod.config.js 打包環境
• src/
• ---common/ 項目公用資源 (公用圖片,css,js等配置)
• ----------------libs.js 第三庫自動渲染到頁面(此處配置的靜態資源,會自動注入到頁面) 配置 注入頁面 底層實現
• ---api 接口請求配置 配置 編寫 使用
• ---components 項目模板 （複用的頁面片段,目前該模板已趨於穩定，細節樣式需調整）
• ---layout/ 項目結構模板 (供各個子模塊調用，後續可擴展多樣化模板,可以添加不帶側邊欄的模板等)
• ----------------layout 默認模板（header+footer）
• ----------------layoutAuth 定製化模板 (比如登錄頁沒有header或者相關)
• ----------------XXXXXXXX 可根據業務需求，定製自己的頁面基礎模板
• ---templates/ 頁面中使用到的模板片段存放目錄
• ---views/ （模塊開發文件夾)
• ----------------子模塊，各種模塊頁面
• ---vendor/ 第三方庫存放在此

輸出目錄 （Output）

查看輸出

• dist/
• ---html
• ---image
• ---media
• ---css
• ---js
• ---lib
• ---index.html

注意：如果有音視頻等，會被打包在media目錄

TODO

• [x] 添加ejs模板，進行頁面(首尾)複用, 頁面功能模板渲染
• [x] mini-css-extract-plugin 提取js內引入scss文件失敗, 打包後依然在js文件（已解決）
• [x] 首頁頁面模板未完成（單獨處理打包）
• [x] 添加第三方庫以鏈接的方式引入
• [x] 增加ESLint代碼校驗
• [x] 增加兩個文件夾，一個是fix IE兼容, 一個是引入的公用庫，自動加載第三方庫到頁面，避免手動填寫
• [x] 增加網站未登錄的模板(無header,footer)
• [x] 添加多樣化layout模板支持(示例layout/layoutAuth)
• [ ] 添加完整網站demo示例(進行中...)
• [ ] 添加doc使用說明以及實現思路解析

LONG TODO（Base on master）

• [ ] 建立分支web-system（後臺管理系統模板）, web-pc (大衆網站模板), web-mobile(移動端模板)

更新日誌 (Update log)

2018.10.22

• 增加個性化模板案例layoutAuth

2018.10.21

• 增加模板片段支持,頁面中可複用的html都可以抽離爲ejs模板片段, 由ejs-loader進行編譯 模板 使用

2018.10.15

• 靜態資源vendor文件夾分類，common與fixIe 這兩個文件夾的文件都會被自動注入到頁面引用; 使用者只需要配置lib.js即可

2018.10.11

• 單獨抽離css樣式問題修復

2018.10.07

• 修改打包後js輸出路徑，原有js跟着頁面文件夾打包後在一起, 現在統一打包到dist/js目錄下, 理由是頁面script 展示好看...屬於優化項