react项目中使用page-skeleton-webpack-plugin在React脚手架项目中使用page-ske

本篇文章依照小土豆biubiubiu 所写文章骨架屏(page-skeleton-webpack-plugin)初探仿写，添加了一些自己遇到的问题，如有侵权，联系本人进行删除

注意：只支持history路由模式

npm install --save-dev page-skeleton-webpack-plugin
安装html-webpack-plugin(npm i html-webpack-plugin)
npm run eject打开react隐藏配置文件
webpack配置：

在webpack.config.js中添加以下代码

const { SkeletonPlugin } = require('page-skeleton-webpack-plugin')
plugins: [                
      new SkeletonPlugin({       
      pathname: path.resolve(__dirname, '../shell'), //  开发环境中点击保存按钮生成的骨架屏代码的保存路径   
      staticDir: path.resolve(__dirname, '../dist'), // 打包时生成的骨架屏的静态资源文件(官方文档指导要和webpack打包输出目录一致)       
      routes: ['/', '/home'], // 添加需要生成骨架屏得页面
  }) 
]

此处开始启动项目报错，Cannot read properties of undefined (reading 'tapAsync')

github.com/ElemeFE/pag…

根据github描述来看，react-create-app依赖得是html-webpack-plugin 4.X的版本，而page-skeleton-webpack-plugin依赖得是3.X得版本，虽然官方表示已经支持4.X的版本，但是代码好像并未更新

修改以下配置：

compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {     //compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing.tapAsync(PLUGIN_NAME, (htmlPluginData, callback) => {     HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync(PLUGIN      _NAME, (htmlPluginData, callback) => {        this.insertScriptToClient(htmlPluginData)        callback(null, htmlPluginData)      })     //compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing.tapAsync(PLUGIN_NAME, (htmlPluginData, callback) => {     HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync(PLUGIN            _NAME, (htmlPluginData, callback) => {        this.originalHtml = htmlPluginData.html        callback(null, htmlPluginData)      })})

此时页面应该可以正常运行，如果页面控制台不报错且输出以下内容，表示page-skeleton正常运行

此时可在控制台输入 toggleBar，然后可以点击图所示按钮

就会生成以下页面内容

点击图上保存按钮，即可在本地生成一个shell文件夹，里面存放的是routes中设置得需要生成骨架屏页面生成的html文件

生产环境配置

在根模版文件中加注释

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root">
      <!-- shell -->
    </div>
  </body>
</html>

此处注意，webpack的html-webpack-plugin中有一项关于压缩移除注释的配置，脚手架在生成项目的过程中，这个配置项默认为true，在骨架屏这里，这个必须设置为false，即保留注释，否则项目在打包部署以后，骨架屏是不会生效的

新的react脚手架将webpack.config.js和webpack.dev.config.js合并，在判断处添加即可，如下所示

最后再对项目进行打包，此处打包时有个小问题，就是必须将正在运行的项目停止，否则一直会提示端口占用 listen EADDRINUSE: address already in use :::8989