作者：小土豆biubiubiu

部落格園：https://www.cnblogs.com/HouJiao/

掘金：https://juejin.im/user/2436173500265335

微信公眾號：土豆媽的碎碎念（掃碼關注，一起吸貓，一起聽故事，一起學習前端技術）

作者文章的內容均來源於自己的實踐，如果覺得有幫助到你的話，可以點贊❤️給個鼓勵或留下寶貴意見

前言

最近頻頻看到了骨架屏這個詞，其實在這之前鮮少聽過骨架屏這個詞。只是平時在瀏覽網站時，會經常看到某個頁面在尚未獲取到真正資料時展示的一些佔位圖形。

那實際上這個就是前面所描述的骨架屏，即在頁面資料尚未載入前先給使用者展示出頁面的大致結構，在獲取到資料以後在具體展示頁面的內容。那骨架屏

所以今天這篇文章就是一篇骨架屏的初探與實踐，內容本身非常簡單，但是其中還是會有一些細節的東西需要注意，否則在實踐實總是無法出現正常的結果。

page-skeleton-webpack-plugin

page-skeleton-webpack-plugin 是餓了麼團隊開發的一款webpack外掛，這個外掛可以根據不同的頁面生成不同的骨架屏頁面。

那接下來就在專案中實踐一下page-skeleton-webpack-plugin。

專案簡介

本次的專案是使用vue-cli2生成的一個專案，專案中元件的內容也非常的簡單，可以 戳這裡 獲取專案程式碼。

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。

// 程式碼位置：/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，這三個配置項的作用分別如下：

執行專案

開發環境中的webpack配置完成以後，使用npm run dev執行專案。
不過不幸的是出現了錯誤