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

webpack-multi-page github地址

一、快速使用

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.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