page-skeleton-webpack-plugin在TypeScript项目中需配置webpack.config.ts，确保与html-webpack-plugin协同、staticDir与output.path一致、routes匹配实际路由，并手动声明模块类型以解决TS报错。
在 TypeScript 项目中用 Webpack 配置骨架屏插件，核心是让 page-skeleton-webpack-plugin 与 TypeScript + Vue/React 构建流程兼容，并确保骨架屏能正确注入到 HTML 模板中。关键不在语言本身（TS 不影响插件运行），而在构建配置的衔接和类型声明支持。
确认依赖与环境兼容性
插件本身基于 JavaScript 运行，但需保证整个构建链路支持 TS：
- Webpack 版本 ≥ 4.0（推荐 v5.x）
-
html-webpack-plugin≥ 3.0，且其template或templateContent能被 TS 项目正常解析（如使用.ejs或纯 HTML 模板） - TypeScript 项目已通过
ts-loader或babel-loader + @babel/preset-typescript正确编译源码 - 若使用 Vue + TS，确保
vue-loader和@vue/compiler-sfc版本匹配，避免模板解析异常影响骨架屏生成
Webpack 配置中集成插件（TS 项目适用写法）
在 webpack.config.ts 中导入并配置，注意路径解析和类型提示：
import * as path from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import { SkeletonPlugin } from 'page-skeleton-webpack-plugin';
<p>const config: webpack.Configuration = {
// ...其他配置
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html', // 推荐用 HTML 模板，避免 TS 编译干扰
// 若用 templateContent，需确保字符串内无 TS 语法
}),
new SkeletonPlugin({
pathname: path.resolve(<strong>dirname, './shell'), // 生成的骨架屏文件存放目录
staticDir: path.resolve(</strong>dirname, './dist'), // 必须与 output.path 一致
routes: ['/', '/search'], // 对应 router 的实际路径，确保页面可访问
// 可选：指定 Puppeteer 启动参数以适配 CI 环境
puppeteerOptions: {
args: ['--no-sandbox', '--disable-setuid-sandbox'],
},
}),
],
};⚠️ 注意：pathname 目录需手动创建，插件不会自动建目录；staticDir 错误会导致骨架屏无法写入或加载失败。
解决 TS 类型缺失问题
page-skeleton-webpack-plugin 官方未提供内置类型定义，直接 import 会报 TS 错误。两种稳妥方案：
- 安装社区类型包（如有维护）：
npm install -D @types/page-skeleton-webpack-plugin（目前暂无稳定版本，需查 npm） - 更通用做法：在项目
src/types/global.d.ts中补充简易声明：
declare module 'page-skeleton-webpack-plugin' {
export class SkeletonPlugin {
constructor(options: {
pathname: string;
staticDir: string;
routes: string[];
puppeteerOptions?: Record<string, any>;
});
}
export { SkeletonPlugin };
}开发时生成与调试骨架屏
插件依赖 Puppeteer 渲染真实 DOM，因此必须在可访问浏览器环境里运行：
- 启动 dev server 后，打开对应路由（如
http://localhost:8080/） - 打开浏览器控制台，输入
toggleBar()触发骨架屏生成（插件内置命令） - 生成后，检查
./shell目录是否产出 HTML/CSS 文件，再确认构建产物dist/index.html是否已注入对应代码 - 若 TS 项目用了自定义 HTML 模板（如 ejs），需确保插件生成的骨架屏内容能通过
正确插入到<div id="app"></div>内部
不复杂但容易忽略
