>作者：小土豆biubiubiu > >部落格園：https://www.cnblogs.com/HouJiao/ > >掘金：https://juejin.im/user/2436173500265335 > > >微信公眾號：土豆媽的碎碎念（掃碼關注，一起吸貓，一起聽故事，一起學習前端技術） > >作者文章的內容均來源於自己的實踐，如果覺得有幫助到你的話，可以點贊❤️給個鼓勵或留下寶貴意見 # 前言 最近頻頻看到了`骨架屏`這個詞，其實在這之前鮮少聽過`骨架屏`這個詞。只是平時在瀏覽網站時，會經常看到某個頁面在尚未獲取到真正資料時展示的一些`佔位圖形`。  那實際上這個就是前面所描述的`骨架屏`，即在頁面資料尚未載入前先給使用者展示出頁面的大致結構，在獲取到資料以後在具體展示頁面的內容。那`骨架屏`相較於傳統的那種`loading`，在很大程度上提升了`使用者體驗`。 所以今天這篇文章就是一篇`骨架屏的初探與實踐`，內容本身`非常簡單`，但是其中還是會有一些細節的東西需要注意，否則在實踐實總是無法出現正常的結果。 # page-skeleton-webpack-plugin [`page-skeleton-webpack-plugin`](https://github.com/ElemeFE/page-skeleton-webpack-plugin#readme) 是`餓了麼`團隊開發的一款`webpack`外掛，這個`外掛`可以根據不同的頁面生成不同的骨架屏頁面。 那接下來就在專案中實踐一下`page-skeleton-webpack-plugin`。 ### 專案簡介 本次的專案是使用`vue-cli2`生成的一個專案，專案中元件的內容也非常的簡單，可以 [`戳這裡`](https://github.com/JEmbrace/skeleton-screen-demo) 獲取專案程式碼。 ### page-skeleton-webpack-plugin安裝 安裝`page-skeleton`也非常簡單，直接執行命令：`npm install --save-dev page-skeleton-webpack-plugin`即可。  > 注意`文件`中有明確說明還要安裝`html-webpack-plugin`，本專案已經安裝了`html-webpack-plugin`。如果你的專案中沒有安裝`html-webpack-plugin`，可以執行`npm install --save-dev html-webpack-plugin`進行安裝。 接下來就需要開始實踐了。 ### webpack配置 首先是需要我們在`開發環境`中生成`骨架屏`的程式碼。 所以第一步是在`開發環境`中配置`SkeletonPlugin`。 ```javascript // 程式碼位置：/skeleton-screen-demo/build/webpack.dev.conf.js // 步驟1：引入骨架屏模組 const { SkeletonPlugin } = require('page-skeleton-webpack-plugin') // 省略程式碼... plugins: [ // 省略其他外掛的配置程式碼... // 步驟2：在外掛中進行配置 new SkeletonPlugin({ pathname: path.resolve(__dirname, '../shell'), // the path to store shell file staticDir: path.resolve(__dirname, '../dist'), // the same as the `output.path` routes: ['/', '/home'], // Which routes you want to generate skeleton screen }) ] ``` `SkeletonPlugin`外掛必選的三個配置項分別為：`pathname`、`staticDir`、`routes`，這三個配置項的作用分別如下： | 配置項 | 資料型別 | 作用 | | ---- | ---- | ---- | | pathname | String | 開發環境中點選儲存按鈕生成的骨架屏程式碼的儲存路徑 | | staticDir | String | 打包時生成的骨架屏的靜態資原始檔(官方文件指導要和`webpack`打包輸出目錄一致) | | routes | Array | 需要生成骨架屏的路由(和專案中`路由配置`的`path`一致) | ### 執行專案 開發環境中的`webpack`配置完成以後，使用`npm run dev`執行專案。 不過不幸的是出現了錯誤