基於webpack4.x, babel7.x 搭建的多頁面腳手架, 簡化前端開發環境配置，開箱即用，專一於開發，不依賴三大框架

Webpack-seed

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

感興趣的朋友，請點個 star

及時關注項目更新, 請點個 watch

項目bug, 請提 issue

特性 （Feature）

• 支持先後端分離開發
• 配置完整的打包方案
• 支持本地開發熱更新
• 集成代碼風格校驗Eslint
• 支持ES6編寫源碼，編譯生成生產代碼
• 內置sass開發環境，自動加樣式前綴,自動編譯css && 注入到頁面
• 開發(生產)環境代碼自動注入頁面, 專一於開發
• 編譯後的程序不依賴於外部的資源, 可放到CDN

模塊化成果

展現下頁面呈現結果(頁面資源加載邏輯),這可能就是咱們想要的模塊化吧

頁面	公用樣式	當前頁面私有樣式	底層核心庫	頁面公用類庫	當前頁面私有模塊
首頁	common.css	index.css	core.js	common.js	index.js
列表頁	common.css	list.css	core.js	common.js	list.js
詳情頁	common.css	detail.css	core.js	common.js	detail.js
購物車	common.css	goods.css	core.js	common.js	goods.js
登陸頁	common.css	login.css	core.js	common.js	login.js

使用指南 （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

目錄結構 （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（後臺管理系統模板）
• [x] web-pc (大衆網站模板)
• [ ] web-mobile(移動端模板)