資訊專欄INFORMATION COLUMN
摘要：地址快速使用克隆項目刪除文件夾，這是我的記錄，所以刪除安裝依賴進(jìn)入開發(fā)模式打包一鍵兼容圖片在執(zhí)行完后執(zhí)行默認(rèn)情況下中的會被處理成當(dāng)?shù)臑殚_頭則會被忽略該處理當(dāng)?shù)闹邪_頭則會被忽略該處理圖片壓縮原圖文件夾壓縮后圖片文件夾雪碧圖原
webpack-multi-page github地址 1、快速使用 1.1 克隆項目
git clone https://github.com/lfyfly/webpack-multi-page.git
刪除.git文件夾，這是我的commit記錄，所以刪除
1.2 安裝依賴npm i1.3 進(jìn)入開發(fā)模式
npm run dev1.4 打包
npm run build1.5 一鍵兼容webp圖片
在執(zhí)行完npm run build后執(zhí)行npm run webp
默認(rèn)情況下html中的img[src]會被處理成img[data-src]當(dāng)img的src為http開頭則會被忽略該處理
當(dāng)img的className中包含not-webp開頭則會被忽略該處理
1.6 圖片壓縮src/assets/_img（原圖文件夾） -> src/assets/img（壓縮后圖片文件夾）
npm run imgmin1.7 雪碧圖
_sprites_src/xxx/*.png（原圖文件夾） -> src/sprites/xxx.css + src/sprites/xxx.png
npm run sp1.8 配置文件
詳見根目錄下webpack.cfg.js
2、功能簡介 2.1 開發(fā)模式多頁面開發(fā)，支持vue
支持無需引入即可全局使用的global.scss
支持px2rem
src/pages中的html（或pug）文件和src/js中的js（入口）文件，必須一一對應(yīng)
新增頁面，需要重新運行npm run dev
html，css，js 更改自動刷新
scss，es6+，pug支持
支持代理配置
2.2 關(guān)于圖片資源
圖片不要放在/static文件下，而是放在/assets。
因為html中img標(biāo)簽的src如果是絕對路徑則會被定為到src目錄下，無法引用到static目錄下
css中圖片如果以/static路徑開頭，會不經(jīng)過url-loader所處理
html中的img標(biāo)簽src對應(yīng)圖片可以被url-loader所處理
第一種方式是相對html路徑
第二種方式以/assets開頭的絕對路徑，自動定位到src/assets目錄下
2.3 打包相關(guān)打包后html文件，css文件圖片路徑完美生成相對路徑（為此css與html打包在同一目錄下）
打包cdn路徑一鍵配置
靜態(tài)文件目錄static文件夾，打包會被拷貝到dist目錄
支持打包文件版本hash，提取vendor.js common.js [page].js文件，只對模塊更改的css，js文件版本hash進(jìn)行更改
vendor.js是指/node_modules文件夾中引用的第三方插件
common.js是指被多個頁面引用超過2次并且，大小超過20k時，才會生成
[page.js]對應(yīng)著每個頁面獨自的js文件
css文件多帶帶提取
小于8k文件自動轉(zhuǎn)base64代碼
gulp 多頁面配置dev-easy
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96330.html
摘要：開箱即用的多頁面腳手架基于模塊化開發(fā)可復(fù)用的現(xiàn)代化網(wǎng)站感興趣的朋友，請點個及時關(guān)注項目更新請點個項目請?zhí)崽匦灾С智昂蠖朔蛛x開發(fā)配置完整的打包方案支持本地開發(fā)熱更新集成代碼風(fēng)格校驗支持編寫源碼，編譯生成生產(chǎn)代碼內(nèi)置開發(fā)環(huán)境，自動加樣式前綴自 Webpack-seed 開箱即用的多頁面腳手架, 基于webpack4.2x babel7.1x模塊化開發(fā)可復(fù)用的現(xiàn)代化網(wǎng)站(Without Vu...
摘要：當(dāng)下最流行的模塊打包器于年月日正式發(fā)布版本，代號。從官方的發(fā)布日志來看本次大版本更新帶來了很多新特性更新和改善，這將會讓的配置更加簡單。本文，筆者將會全面介紹的新特性及實踐。只支持模塊，目前處于試驗階段。 導(dǎo)語: webpack是一個JS應(yīng)用打包器, 它將應(yīng)用中的各個模塊打成一個或者多個bundle文件。借助loaders和plugins，它可以改變、壓縮和優(yōu)化各種各樣的文件。它的輸入...
摘要：開箱即用的多頁面腳手架最近接手一個新項目，公司官網(wǎng)，官網(wǎng)為了對爬蟲友好，不合適做單頁面，更不大適合用，這樣的框架。痛不欲生，即使寫完了，以后的迭代維護(hù)同樣痛苦。還不如創(chuàng)建一個腳手架，以后遇到這種官網(wǎng)多頁面的需求的時候拿來即用，豈不美哉。 開箱即用的多頁面webpack腳手架 最近接手一個新項目，公司官網(wǎng)，官網(wǎng)為了對爬蟲友好，不合適做單頁面，更不大適合用react，vue這樣的框架。本來...
摘要：開箱即用的多頁面腳手架最近接手一個新項目，公司官網(wǎng)，官網(wǎng)為了對爬蟲友好，不合適做單頁面，更不大適合用，這樣的框架。痛不欲生，即使寫完了，以后的迭代維護(hù)同樣痛苦。還不如創(chuàng)建一個腳手架，以后遇到這種官網(wǎng)多頁面的需求的時候拿來即用，豈不美哉。 開箱即用的多頁面webpack腳手架 最近接手一個新項目，公司官網(wǎng)，官網(wǎng)為了對爬蟲友好，不合適做單頁面，更不大適合用react，vue這樣的框架。本來...
摘要：以為例，編寫來幫助我們完成重復(fù)的工作編譯壓縮我只要執(zhí)行一下就可以檢測到文件的變化，然后為你執(zhí)行一系列的自動化操作，同樣的操作也發(fā)生在這些的預(yù)處理器上。的使用是針對第三方類庫使用各種模塊化寫法以及語法。 showImg(https://segmentfault.com/img/bVbtZYK); 一：前端工程化的發(fā)展 很久以前，互聯(lián)網(wǎng)行業(yè)有個職位叫做 軟件開發(fā)工程師 在那個時代，大家可能...
閱讀 2497·2021-11-24 09:39
閱讀 3420·2021-11-15 11:37
閱讀 2271·2021-10-08 10:04
閱讀 3981·2021-09-09 11:54
閱讀 1895·2021-08-18 10:24
閱讀 1065·2019-08-30 11:02
閱讀 1809·2019-08-29 18:45
閱讀 1664·2019-08-29 16:33
