vue骨架屏是为了在首屏加载时提高用户体验制作的，有很多种方法，最近学了一种通过自定义webpack插件来生成骨架屏的方法
首先在项目根目录下新建一个myPlugin.js
function MyPlugin(options){
this.options=options;
}
//webpack插件都内置一个apply方法
MyPlugin.prototype.apply=function(complier){
complier.plugin('compilation',(compilation)=>{
compilation.plugin('html-webpack-plugin-before-html-processing',(htmlData,callback)=>{
//在编译index.html文件时替换<div id="app"></div>的内容
htmlData.html=htmlData.html.replace('<div id="app"></div>',`<div id="app">`+
`<div style="width:90%;height:200px;background-color:rgba(0,0,0,0.3);margin:20px auto"></div>`+
`<div style="width:90%;height:200px;background-color:rgba(0,0,0,0.3);margin:20px auto"></div>`+
`</div>`)
callback(null,htmlData)
})
})
}
module.exports=MyPlugin然后在webpack.config.js中导入这个插件即可
