vue骨架屏

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中导入这个插件即可