国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

基于webpack4.x, babel7.x 搭建的多頁面腳手架, 簡化前端開發(fā)環(huán)境配置，開箱即用，

junfeng777 / 2072人閱讀

摘要：開箱即用的多頁面腳手架基于模塊化開發(fā)可復用的現(xiàn)代化網(wǎng)站感興趣的朋友，請點個及時關(guān)注項目更新請點個項目請?zhí)崽匦灾С智昂蠖朔蛛x開發(fā)配置完整的打包方案支持本地開發(fā)熱更新集成代碼風格校驗支持編寫源碼，編譯生成生產(chǎn)代碼內(nèi)置開發(fā)環(huán)境，自動加樣式前綴自

Webpack-seed

開箱即用的多頁面腳手架, 基于webpack4.2x babel7.1x模塊化開發(fā)可復用的現(xiàn)代化網(wǎng)站(Without Vue Angular React)

感興趣的朋友，請點個 star

及時關(guān)注項目更新, 請點個 watch

項目bug, 請?zhí)?issue

特性 （Feature）

支持前后端分離開發(fā)

配置完整的打包方案

支持本地開發(fā)熱更新

集成代碼風格校驗Eslint

支持ES6編寫源碼，編譯生成生產(chǎn)代碼

內(nèi)置sass開發(fā)環(huán)境，自動加樣式前綴,自動編譯css && 注入到頁面

開發(fā)(生產(chǎn))環(huán)境代碼自動注入頁面, 專注于開發(fā)

編譯后的程序不依賴于外部的資源, 可放到CDN

模塊化成果

展示下頁面呈現(xiàn)結(jié)果(頁面資源加載邏輯),這可能就是我們想要的模塊化吧

頁面 公用樣式 當前頁面私有樣式 底層核心庫 頁面公用類庫 當前頁面私有模塊
首頁 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

本地開發(fā)(dev)

npm run dev

打包(build)

默認情況下，該配置方案假設(shè)你的應(yīng)用是被部署在一個域名的根路徑上例如 https://www.my-app.com/

如果應(yīng)用被部署在一個子路徑上，你就需要用這個選項指定這個子路徑

例如，如果你的應(yīng)用被部署在 https://www.my-app.com/my-app/

則設(shè)置 webpack的output.publicPath 為 /my-app/

本項目由于需要臨時部署在git-pages預(yù)覽 所以改配置臨時改為/webpack-seed/

普通打包(大部分) npm run build 默認 "/"

該命令具體請看package.json scripts命令配置

配置詳情

scripts命令配置

預(yù)覽

// 普通打包(大部分) npm run build publicPath默認 "/"
npm run build

// 打包時 npm run build:git 該命令會打包的路徑會自動帶上github項目地址/webpack-seed/
//(當發(fā)布環(huán)境不是服務(wù)器根路徑，都可以采用該方案，只需更改路徑名稱即可，本項目二級路徑為webpack-seed)
npm run build:git
目錄結(jié)構(gòu) （Source）

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/ 項目公用資源 (公用圖片,css,js等配置)

----------------libs.js 第三庫自動渲染到頁面(此處配置的靜態(tài)資源,會自動注入到頁面)

---api 接口請求配置

---components 項目模板 （復用的頁面片段,目前該模板已趨于穩(wěn)定，細節(jié)樣式需調(diào)整）

---layout/ 項目結(jié)構(gòu)模板 (供各個子模塊調(diào)用，后續(xù)可擴展多樣化模板,可以添加不帶側(cè)邊欄的模板等)

----------------layout 默認模板（header+footer）

----------------layoutAuth 定制化模板 (比如登錄頁沒有header或者相關(guān))

----------------XXXXXXXX 可根據(jù)業(yè)務(wù)需求，定制自己的頁面基礎(chǔ)模板

---templates/ 頁面中使用到的模板片段存放目錄

---views/ （模塊開發(fā)文件夾)

----------------子模塊，各種模塊頁面

---vendor/ 第三方庫存放在此

輸出目錄 （Output）

查看輸出

dist/

---html

---image

---media

---css

---js

---lib

---index.html

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

[x] 添加ejs模板，進行頁面(首尾)復用, 頁面功能模板渲染

[x] mini-css-extract-plugin 提取js內(nèi)引入scss文件失敗, 打包后依然在js文件（已解決）

[x] 首頁頁面模板未完成（多帶帶處理打包）

[x] 添加第三方庫以鏈接的方式引入

[x] 增加ESLint代碼校驗

[x] 增加兩個文件夾，一個是fix IE兼容, 一個是引入的公用庫，自動加載第三方庫到頁面，避免手動填寫

[x] 增加網(wǎng)站未登錄的模板(無header,footer)

[x] 添加多樣化layout模板支持(示例layout/layoutAuth)

[ ] 添加完整網(wǎng)站demo示例(進行中...)

[ ] 添加doc使用說明以及實現(xiàn)思路解析

LONG TODO（Base on master）

[ ] 建立分支web-system（后臺管理系統(tǒng)模板）

[x] web-pc (大眾網(wǎng)站模板)

[ ] web-mobile(移動端模板)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/98595.html

相關(guān)文章

  • 開箱即用的多頁面webpack腳手架

    摘要：開箱即用的多頁面腳手架最近接手一個新項目，公司官網(wǎng)，官網(wǎng)為了對爬蟲友好，不合適做單頁面，更不大適合用，這樣的框架。痛不欲生，即使寫完了，以后的迭代維護同樣痛苦。還不如創(chuàng)建一個腳手架，以后遇到這種官網(wǎng)多頁面的需求的時候拿來即用，豈不美哉。 開箱即用的多頁面webpack腳手架 最近接手一個新項目，公司官網(wǎng)，官網(wǎng)為了對爬蟲友好，不合適做單頁面，更不大適合用react，vue這樣的框架。本來...

    sunnyxd 評論0 收藏0

  • 開箱即用的多頁面webpack腳手架

    摘要：開箱即用的多頁面腳手架最近接手一個新項目，公司官網(wǎng)，官網(wǎng)為了對爬蟲友好，不合適做單頁面，更不大適合用，這樣的框架。痛不欲生，即使寫完了，以后的迭代維護同樣痛苦。還不如創(chuàng)建一個腳手架，以后遇到這種官網(wǎng)多頁面的需求的時候拿來即用，豈不美哉。 開箱即用的多頁面webpack腳手架 最近接手一個新項目，公司官網(wǎng)，官網(wǎng)為了對爬蟲友好，不合適做單頁面，更不大適合用react，vue這樣的框架。本來...

    atinosun 評論0 收藏0

  • webpack4.x升級摘要

    摘要：以為例，編寫來幫助我們完成重復的工作編譯壓縮我只要執(zhí)行一下就可以檢測到文件的變化，然后為你執(zhí)行一系列的自動化操作，同樣的操作也發(fā)生在這些的預(yù)處理器上。的使用是針對第三方類庫使用各種模塊化寫法以及語法。 showImg(https://segmentfault.com/img/bVbtZYK); 一：前端工程化的發(fā)展 很久以前，互聯(lián)網(wǎng)行業(yè)有個職位叫做 軟件開發(fā)工程師 在那個時代，大家可能...

    levinit 評論0 收藏0

  • 告別webpack react 搭建多頁面之痛

    摘要：搭建多頁面應(yīng)用在往下看之前請確保先上個涼的吃著目錄結(jié)構(gòu)編譯結(jié)果配置文件腳本存放處項目開發(fā)中一些常用的方法主要存放和請求有關(guān)的靜態(tài)文件模版文件項目開發(fā)中一些常用的方法其實我覺得可以和放在一塊，但是個人習慣還是分開啦開始擼代碼如何創(chuàng)建多頁面應(yīng)用 webpack4 搭建 react 多頁面應(yīng)用 在往下看之前請確保nodejs > 8.X 先上個涼的吃著 目錄結(jié)構(gòu) . ├── dist ...

    seanHai 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<