在原生APP中我们经常可以看到，打开app时候，内容还没出来，app会被别的内容替代，这样很好的提升了用户体验。那么在webApp中，我们如何避免白屏的尴尬情况呢？可以通过 vue-skeleton-webpack-plugin这个插件来实现类似的效果。

1.首先需要安装这个插件 npm install vue-skeleton-webpack-plugin  -S

2.我们在src目录下创建 Skeleton.vue

3.创建入口文件：entry-skeleton.js

import Vue from 'vue'import Skeleton from './Skeleton'export default new Vue({  components: {    Skeleton  },  template: '
     '})

4.我们在build 目录下创建 webpack.skeleton.conf.js

'use strict'; const path = require('path')const merge = require('webpack-merge')const baseWebpackConfig = require('./webpack.base.conf')const nodeExternals = require('webpack-node-externals') function resolve(dir) {  return path.join(__dirname, dir)} module.exports = merge(baseWebpackConfig, {  target: 'node',  devtool: false,  entry: {    app: resolve('../src/entry-skeleton.js')  },  output: Object.assign({}, baseWebpackConfig.output, {    libraryTarget: 'commonjs2'  }),  externals: nodeExternals({    whitelist: /\.css$/  }),  plugins: []})

在后在webpack.dev.conf.js和webpack.prod.conf.js分别引入 webpack.skeleton.conf.js

new SkeletonWebpackPlugin({      webpackConfig: require('./webpack.skeleton.conf'),      quiet: true    })

这样大功告成，我们在页面加载比较慢的时候不至于出现白屏的尴尬状况了。