随着用户对页面加载速度和响应速度的要求越来越高，前端骨架屏这种加载中的页面展示方式就逐渐流行起来了。它可以在等待页面加载的过程中，先展示一个简单的页面骨架，让用户有一个快速反馈，减少等待时间的不适感。
本文将介绍一种用 Webpack 实现前端骨架屏的方法，并提供示例代码供学习和实践。
环境准备
在开始实践之前，需要先安装 node.js 环境和 Webpack。
- 安装 node.js 以及 npm
可在官网下载安装包，也可以使用 nvm 等工具安装。
- 使用 npm 安装 Webpack
npm install webpack webpack-cli --save-dev
创建骨架屏组件
首先，我们需要创建一个骨架屏组件，例如：
<div class="skeleton"> <div class="skeleton-header"></div> <div class="skeleton-body"></div> <div class="skeleton-footer"></div> </div>
该组件可根据实际项目需要进行改动，例如增加更多的占位符，或者根据实际页面结构进行调整。
用 Webpack 实现骨架屏
下面我们通过一个示例来演示如何用 Webpack 实现骨架屏。
创建 webpack.config.js 文件
首先，需要在项目根目录下创建 webpack.config.js 文件，并引入相关依赖：
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')配置入口文件和输出文件
确定入口文件和输出文件路径：
const config = {
entry: './src/index.js',
output: {
filename: '[name].[hash:8].js',
path: path.resolve(__dirname, 'dist')
}
}配置 HTMLWebpackPlugin
用于在构建时生成 html 文件，并插入相关的 js 和 css：
-- -------------------- ---- -------
-------------- - -
--- -------------------
--------- -------------------
--------- ------------
---
--- -------------------
--------- ----------------------
--------- ----------------
------- -----
---
-其中 template 属性用于指定模板文件路径，filename 属性用于指定生成的文件名和路径。inject 属性设置为 false，表示生成的文件不自动插入 js 和 css 文件。
配置 SkeletonWebpackPlugin
用于生成骨架屏模板和相关样式：
-- -------------------- ---- -------
--------------------
--- -----------------------
-------------- -
------ -
---- -------------------- --------------------------
-
--
--------- -----
------ -----
------- -
----- -------
------- -
- ----- ---- ----------- --------------- --
- ----- --------- ----------- ---------------- -
-
-
--
-其中，webpackConfig 属性可以用于配置 Webpack，在此我们指定 entry 入口为 entry-skeleton.js 文件，该文件将用来生成骨架屏。
minimize 属性用于压缩代码，减小骨架屏生成的文件尺寸。
quiet 属性设置为 true，表示生成骨架屏时不输出日志信息。
router 属性用于配置路由（Vue-router、React-router 等），便于区分不同页面的骨架屏。
配置 CSS
-- -------------------- ---- -------
------------- - -
------ -
-
----- ---------
---- -
----------------------------
-------------
----------------
-
-
-
-其中，MiniCssExtractPlugin.loader 用于将 css 抽取成单独文件，css-loader 用于处理 css 文件，postcss-loader 用于对 css 进行后处理。
配置完成
至此，我们已经完成了 Webpack 骨架屏的配置，可以开始构建：
npm run build
执行该命令后，Webpack 将自动生成骨架屏模板和样式，以及 js 和 css 文件。
最终效果如下：
总结
前端骨架屏可以在页面加载过程中，提前展示一个骨架页面，有效降低用户的等待时间和不适感。通过 Webpack，我们可以快速、简单地实现前端骨架屏功能，并获得良好的用户反馈。
希望这篇文章对您有所帮助，也欢迎您留下宝贵的建议和意见。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648d4f0248841e9894b9c2b1