page-skeleton-webpack-plugin 官方Demo 踩坑史目前page-skeleton-webpa

page-skeleton-webpack-plugin 官方Demo 踩坑史，助跑、能用~

目前page-skeleton-webpack-plugin 似乎没怎么维护了，初看一堆的issues 难以下手呀。

不过看了自动生成骨架屏的原理，这个文章基于page-skeleton-webpack-plugin分析自动生成骨架屏原理，还是很有必要进行一次DEMO 演习，以证明生成骨架屏的可行性、必要性。

下面记录踩坑步骤：

1、拉取`page-skeleton-webpack-plugin` 代码,或者下载zip包

git clone https://github.com/ElemeFE/page-skeleton-webpack-plugin.git

2、拉好代码之后，切换到`examples/sale` 案例目录下，进行依赖安装，这里你可能会遇到Puppeteer 安装失败的问题，这里请你上网|cnpm |yarn等，多试几次，直到成功。

3、跑`npm run dev` 这里你可能遇到：

报TypeError: Cannot read property 'properties' of undefined
- 升级webpack-cli到3.1.1 npm install --save-dev webpack-cli@3.1.1
- 去除Demo 工程webpack.config.js // 119line下的storagies 对象，避免报错
报缺style-loader模块
- 安装style-loader 模块
报address already in use :::8989 at Server ,修改成任何端口，依然提示端口被占用的bug。
- 发现compiler.hooks.entryOption被执了两次，于是：在createServer方法中判断插件的server是否被创建，没创建的时，正常执行，创建过就什么都不做了。修改文件在node_modules/page-skeleton-webpack-plugin-master/src/skeletonPlugin.js 在SkeletonPlugin.prototype.createServer 里加一个if判断

// const server = this.server = new Server(this.options) // eslint-disable-line no-multi-assign
// server.listen().catch(err => server.log.warn(err))
if (!this.server) {
    const server = this.server = new Server(this.options) // eslint-disable-line no-multi-assign
    server.listen().catch(err => server.log.warn(err))
}

然后跑dev 应该问题不大了，如何还有问题，依赖删了再重新试一下。很多问题都可以在issues 中找到，只是官方没有对demo进行更新处理。