webpack4 多頁面配置功能齊全開箱即用

antz 發布于2019-08-23 10:25 / 2532人閱讀

摘要：地址快速使用克隆項目刪除文件夾，這是我的記錄，所以刪除安裝依賴進入開發模式打包一鍵兼容圖片在執行完后執行默認情況下中的會被處理成當的為開頭則會被忽略該處理當的中包含開頭則會被忽略該處理圖片壓縮原圖文件夾壓縮后圖片文件夾雪碧圖原

webpack-multi-page github地址 1、快速使用 1.1 克隆項目

git clone https://github.com/lfyfly/webpack-multi-page.git

刪除.git文件夾，這是我的commit記錄，所以刪除

1.2 安裝依賴

npm i

1.3 進入開發模式

npm run dev

1.4 打包

npm run build

1.5 一鍵兼容webp圖片

在執行完npm run build后執行npm run webp

默認情況下html中的img[src]會被處理成img[data-src]

當img的src為http開頭則會被忽略該處理

當img的className中包含not-webp開頭則會被忽略該處理

1.6 圖片壓縮

src/assets/_img（原圖文件夾） -> src/assets/img（壓縮后圖片文件夾）

npm run imgmin

1.7 雪碧圖

_sprites_src/xxx/*.png（原圖文件夾） -> src/sprites/xxx.css + src/sprites/xxx.png

npm run sp

1.8 配置文件

詳見根目錄下webpack.cfg.js

2、功能簡介 2.1 開發模式

多頁面開發，支持vue

支持無需引入即可全局使用的global.scss

支持px2rem

src/pages中的html（或pug）文件和src/js中的js（入口）文件，必須一一對應

新增頁面，需要重新運行npm run dev

html，css，js 更改自動刷新

scss，es6+，pug支持

支持代理配置

2.2 關于圖片資源

圖片不要放在/static文件下，而是放在/assets。

因為html中img標簽的src如果是絕對路徑則會被定為到src目錄下，無法引用到static目錄下

css中圖片如果以/static路徑開頭，會不經過url-loader所處理

html中的img標簽src對應圖片可以被url-loader所處理

第一種方式是相對html路徑

第二種方式以/assets開頭的絕對路徑，自動定位到src/assets目錄下

2.3 打包相關

打包后html文件，css文件圖片路徑完美生成相對路徑（為此css與html打包在同一目錄下）

打包cdn路徑一鍵配置

靜態文件目錄static文件夾，打包會被拷貝到dist目錄

支持打包文件版本hash，提取vendor.js common.js [page].js文件，只對模塊更改的css，js文件版本hash進行更改

vendor.js是指/node_modules文件夾中引用的第三方插件

common.js是指被多個頁面引用超過2次并且，大小超過20k時，才會生成

[page.js]對應著每個頁面獨自的js文件

css文件多帶帶提取

小于8k文件自動轉base64代碼

gulp 多頁面配置

dev-easy

云服務器 GPU云服務器開箱即用 webrtc 關于頁面彈框功能實現 webpack4 多頁面

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96330.html

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

摘要：開箱即用的多頁面腳手架基于模塊化開發可復用的現代化網站感興趣的朋友，請點個及時關注項目更新請點個項目請提特性支持前后端分離開發配置完整的打包方案支持本地開發熱更新集成代碼風格校驗支持編寫源碼，編譯生成生產代碼內置開發環境，自動加樣式前綴自 Webpack-seed 開箱即用的多頁面腳手架, 基于webpack4.2x babel7.1x模塊化開發可復用的現代化網站(Without Vu...

junfeng777 2019-08-23 12:29 評論0 收藏0
webpack4新特性介紹

摘要：當下最流行的模塊打包器于年月日正式發布版本，代號。從官方的發布日志來看本次大版本更新帶來了很多新特性更新和改善，這將會讓的配置更加簡單。本文，筆者將會全面介紹的新特性及實踐。只支持模塊，目前處于試驗階段。導語: webpack是一個JS應用打包器, 它將應用中的各個模塊打成一個或者多個bundle文件。借助loaders和plugins，它可以改變、壓縮和優化各種各樣的文件。它的輸入...

NotFound 2019-08-22 15:42 評論0 收藏0
開箱即用的多頁面webpack腳手架

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

sunnyxd 2019-08-22 17:17 評論0 收藏0
開箱即用的多頁面webpack腳手架

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

atinosun 2019-08-02 10:27 評論0 收藏0
webpack4.x升級摘要

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

levinit 2019-08-23 18:11 評論0 收藏0