lavas-project/vue-skeleton-webpack-plugin

Lavas webpack plugin: skeleton solution for PWA webshell

vue-skeleton-webpack-plugin's Issues

请问vue-cli3.0构建的项目注入的html和css如何压缩？

请问vue-cli3.0构建的项目注入的html和css如何压缩？

加入了eslint后，报错了

之前没有用eslint的时候，是没有问题的，但是引入了eslint后就报错了，错误信息如下：

  http://eslint.org/docs/rules/  Parsing error: Adjacent JSX elements must be 
wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

  4 |     </div>
  5 | </template>
> 6 | <script>
    | ^
  7 | export default {
  8 |
  9 | }
  assets\skeleton\skeleton.vue:6:1
 1 problem (1 error, 0 warnings)
Errors:
  1  http://eslint.org/docs/rules/null
    at D:\base gitrepository\msap\source\mars\qc_client\node_modules\vue-skeleton-webpack-plugin\lib\ssr.js:109:24
    at compile (D:\base gitrepository\msap\source\mars\qc_client\node_modules\webpack\lib\Compiler.js:296:11)
    at hooks.afterCompile.callAsync.err (D:\base gitrepository\msap\source\mars\qc_client\node_modules\webpack\lib\Compiler.js:552:14)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\base gitrepository\msap\source\mars\qc_client\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook (D:\base gitrepository\msap\source\mars\qc_client\node_modules\tapable\lib\Hook.js:154:20)
    at compilation.seal.err (D:\base gitrepository\msap\source\mars\qc_client\node_modules\webpack\lib\Compiler.js:549:30)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\base gitrepository\msap\source\mars\qc_client\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (D:\base gitrepository\msap\source\mars\qc_client\node_modules\tapable\lib\Hook.js:154:20)
    at hooks.optimizeAssets.callAsync.err (D:\base gitrepository\msap\source\mars\qc_client\node_modules\webpack\lib\Compilation.js:1323:35)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\base gitrepository\msap\source\mars\qc_client\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (D:\base gitrepository\msap\source\mars\qc_client\node_modules\tapable\lib\Hook.js:154:20)
    at hooks.optimizeChunkAssets.callAsync.err (D:\base gitrepository\msap\source\mars\qc_client\node_modules\webpack\lib\Compilation.js:1314:32)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\base gitrepository\msap\source\mars\qc_client\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (D:\base gitrepository\msap\source\mars\qc_client\node_modules\tapable\lib\Hook.js:154:20)
    at hooks.additionalAssets.callAsync.err (D:\base gitrepository\msap\source\mars\qc_client\node_modules\webpack\lib\Compilation.js:1309:36)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\base gitrepository\msap\source\mars\qc_client\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:6:1)

webpack配置

new SkeletonWebpackPlugin({
	webpackConfig: {
		entry: skeletonEntries
	},
	insertAfter:'<div class="skeletonapp" id="skeletonapp">',
	minimize:true,
	quiet:true
}),
skeletonEntries里面包含entry-skeleton.js

entry-skeleton.js

import skeleton from "../skeleton.vue";
import Vue from "vue/dist/vue.min.js";
export default new Vue({
	components: {
		skeleton
	},
	template: "<skeleton />"
});

skeleton.vue

<template>
    <div class="skeleton-list">
        <img src="./lib/img/homepage_loading.gif" />
    </div>
</template>
<script>
export default {
    
}
</script>
<style>
.clearfix:after{
	clear: both;
	content: '.';
	display: block;
	height: 0px;
	visibility: hidden;
}
.skeleton-list{
	width:100%;
	height:100%;
}
.skeleton-list img{
	position:relative;
	left:50%;
	top:50%;
	vertical-align:middle;
	-webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
</style>

.eslintrc.js

module.exports = {
	"globals" : {
        "window":true,
        "document":true,
        "$":true
    },
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "standard",
	"parser": "babel-eslint",
    "parserOptions": {
        "ecmaVersion": 2015,
        "sourceType": "module"
    },
    "rules": {
        "indent": [
            "error",
            "tab"
        ],
		"no-tabs": ["error", { allowIndentationTabs: true }],
        "linebreak-style": [
            "error",
            "windows"
        ],
        "quotes": [
            "off",
            "double"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
};

window.STYLE_READY this is means?

webpack4 support

多页面项目里面不一定每个页面都有skeleton

多页面项目里面不一定有每个页面有对应的skeleton
// find current processing entry
if (Array.isArray(usedChunks)) {
entryKey = Object.keys(skeletonEntries).find(v => usedChunks.indexOf(v) > -1);
}
else {
entryKey = DEFAULT_ENTRY_NAME;
}
这样会有问题 undefined...

能提供一下@vue/cli 3.0的示例？

webpack 4.25.1 报了95% emitting HtmlWebpackPluginEmpty entry for skeleton, please check your webpack.config.错误

我使用了webpack 4.25.1，现在业务需求是只有部分页面需要骨架屏，所以我下载了1.2.2版本的vue-skeleton-webpack-plugin，
在使用webpack-dev-server开发的时候，报了下面的错误，

95% emitting HtmlWebpackPlugin Empty entry for skeleton, please check your webpack.config.

webpack.config.js配置如下：

new SkeletonWebpackPlugin({
	webpackConfig: {
		entry: skeletonEntries
	},
	insertAfter:'<div class="skeletonapp" id="skeletonapp">',
	minimize:true,
	quiet:true
}),

安装后提示vue、vue-server-renderer版本不匹配

安装完,运行报错，如下；
Error:
Vue packages version mismatch:

• [email protected]
• [email protected]

安装包版本：
“webpack": 3.12.0
"vue-skeleton-webpack-plugin": "1.2.2";

谢谢了；

是否有demo线上能访问下?

请问有具体的demo或者说明具体怎么使用您的插件呢?恕我愚昧,研究两三天还没看懂具体怎么操作实现功能,谢谢!

单页面应用的多个骨架问题

如何在vue-cli脚手架搭建的模板中，编写适合不同页面的多个骨架？
examples 中的 multi-skeleton是例子吗？ 感觉例子不是太好理解

开发模式下获取不到skeletonCSS

骨架屏结束的时机,能否在组件加载完数据之后

目前遇到的问题是骨架屏展示结束之后,页面还是要去请求数据,还是会有一段时间的白屏效果

增加 Hotreload 功能

目前修改骨架屏组件需要重启才能生效。

loader.js

// insert import sentence in the head
source += importExpression;
这里 组件import插到source的尾部，不会出现问题吗？

MPA，但是没有使用vue-route的情况下能不能使用这个插件呢。

vue单页面有拼接参数时无法切换骨架id

vue项目路由:
'/vueHome'

骨架路由:
routes: [{
path: '/vueHome',
skeletonId: 'skeleton1'
}]

访问形式:
1.无拼接参数
//localhost:8080/#/vueHome
->可以正常访问id=skeleton1的骨架屏(OK)

2.拼接了参数:
//localhost:8080/#/vueHome?appKey=xxx
-> 无法访问id=skeleton1的骨架屏(NG)

↓
问题: 如何让vue的路由和骨架的路由在有?拼接参数的时候也可以正常访问?
(有时候别人调用我们vue项目入口需要传递动态的参数)

npm run test出现错误

报错呢，好像是有个命令错了

[email protected] test E:\git\vue-skeleton-webpack-plugin
npm run build && ./node_modules/.bin/nyc ava

[email protected] build E:\git\vue-skeleton-webpack-plugin
buble src -o lib

'.' 不是内部或外部命令，也不是可运行的程序
或批处理文件。

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run
npm ERR! node v6.11.3
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] test: npm run build && ./node_modules/.bin/nyc ava
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] test script 'npm run build && ./node_modules/.bin/nyc ava'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the vue-skeleton-webpack-plugin package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run build && ./node_modules/.bin/nyc ava
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs vue-skeleton-webpack-plugin
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls vue-skeleton-webpack-plugin
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! E:\git\vue-skeleton-webpack-plugin\npm-debug.log

请问路由支持hash模式吗

打包报错

照着vue-cli的那个example配置了一下，唯一的差别是用了vux-loader, 打包的时候报下面的错误，请大佬帮看下是啥问题？谢谢！

Starting to optimize CSS...
Processing static/css/main.5a5c7be868e0038b0bea389a1a89e55d.css...
Processed static/css/main.5a5c7be868e0038b0bea389a1a89e55d.css, before: 101813, after: 58680, ratio:57.64%
======== vux-loader: duplicate-style done! ========

TypeError: Cannot read property 'split' of undefined
at getModuleName (C:\Users\Desktop\test-skeleton\node_modules\webpack-node-externals\index.js:18:16)
at C:\Users\Desktop\test-skeleton\node_modules\webpack-node-externals\index.js:40:26
at handleExternals (C:\Users\Desktop\test-skeleton\node_modules\webpack\lib\ExternalModuleFactoryPlugin.js:70:16)
at C:\Users\Desktop\test-skeleton\node_modules\webpack\lib\ExternalModuleFactoryPlugin.js:83:5
at applyPluginsAsyncWaterfall (C:\Users\Desktop\test-skeleton\node_modules\webpack\lib\NormalModuleFactory.js:236:4)
at NormalModuleFactory.applyPluginsAsyncWaterfall (C:\Users\Desktop\test-skeleton\node_modules\tapable\lib\Tapable.js:260:70)
at NormalModuleFactory.create (C:\Users\Desktop\test-skeleton\node_modules\webpack\lib\NormalModuleFactory.js:220:8)
at semaphore.acquire (C:\Users\Desktop\test-skeleton\node_modules\webpack\lib\Compilation.js:407:18)
at Semaphore.acquire (C:\Users\Desktop\test-skeleton\node_modules\webpack\lib\util\Semaphore.js:16:4)
at Compilation._addModuleChain (C:\Users\Desktop\test-skeleton\node_modules\webpack\lib\Compilation.js:406:18)
at Compilation.addEntry (C:\Users\Desktop\test-skeleton\node_modules\webpack\lib\Compilation.js:494:8)
at Compiler.compiler.plugin (C:\Users\Desktop\test-skeleton\node_modules\webpack\lib\SingleEntryPlugin.js:24:16)
at Compiler.applyPluginsParallel (C:\Users\Desktop\test-skeleton\node_modules\tapable\lib\Tapable.js:293:14)
at applyPluginsAsync.err (C:\Users\Desktop\test-skeleton\node_modules\webpack\lib\Compiler.js:499:9)

SPA 中多路由正则生成有误

问题描述

相关 ISSUE #18

SPA 多路由多个 Skeleton 情况下 path 参数可以是字符串或者正则。
当填写字符串例如 /page1 时，内部转成的正则是 /^\/page1(?:\/)?$/i，无法匹配 /page1?a=1 这样的路由路径。

问题原因

使用 path-to-regexp 将字符串转正则，默认情况下 end: true 会要求匹配结尾，这就导致 /page1 无法匹配带参数的情况了。

解决方法

两种方式：

1. path 参数直接使用正则 path: /^\/page1/
2. path 参数继续使用字符串，内部转换成正则时 end: false

骨架中的css没有被copy到html中

按照demo在vue-cli的基础上修改,骨架vue文件中的动漫元素已经被copy到html中了 但是css没有,请问这是啥原因呢?

[bug] build: 一直在loading

UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): TypeError: Path must be a string. Received undefined
(node:37146) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

项目中使用到了HappyPack 不知道会不会有影响

在 Skeleton 组件中引用图片资源问题

问题描述

在 Skeleton 组件中引用的图片，不会被 url-loader 处理，最终输出。
例如引用了一张 jpg 图片：

// Skeleton.vue
<template>
    <div class="skeleton-wrapper">
          <img src="../assets/images/skeleton-logo.jpg" class="skeleton-logo">

配合 url-loader

// webpack.config.js
{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
        limit: 10000,
        name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
}

构建之后发现最终产物中并没有包含重命名之后的图片。

问题原因

插件在运行过程中，创建了一个新的 webpack 构建流程，这也是需要用户传入一个给 Skeleton 使用的 webpack 配置对象的原因。

但是这样做的问题是和已有的构建流程隔离，在新流程中 url-loader 已经处理了图片并调用了 emitFile 准备输出，但是已有的 webpack 流程并不知道。

解决办法

在插件运行过程中创建一个 childCompiler 继承已有的上下文而不是一个全新的 webpack compiler。

const childCompiler = compilation.createChildCompiler('vue-skeleton-webpack-plugin-compiler', outputOptions);

childCompiler.context = context;
new LibraryTemplatePlugin(undefined, 'commonjs2').apply(childCompiler);
new NodeTargetPlugin().apply(childCompiler);
new SingleEntryPlugin(context, serverWebpackConfig.entry, undefined).apply(childCompiler);
new LoaderTargetPlugin('node').apply(childCompiler);
new ExternalsPlugin('commonjs2', serverWebpackConfig.externals).apply(childCompiler);
new ExtractTextPlugin({
    filename: outputCssPath
}).apply(childCompiler);

这样不光能解决这个 Bug，由于能共享已有的 webpack 构建上下文，整个插件的配置项也不需要再传一个完整的 webpack 配置对象了。

vue-cli3 骨架屏开发阶段未注入样式

例子/examples/vue-cli3 未实现开发阶段注入骨架屏样式

若在vue.config.js 开启 css.extract = true 开发阶段又无法实现样式热加载，请问该如何解决

报这个错是什么意思呢？

您好，非常感谢您贡献的插件，我在使用的过程中遇到了这个问题
/usr/local/var/www/Megvii/alfar-frontend-m/node_modules/memory-fs/lib/MemoryFileSystem.js:114
throw new MemoryFileSystemError(errors.code.ENOENT, _path);
这个怎么解决呢

如何才能配置成功啊？失败N次了。

单页面
node_modules\memory-fs\lib\MemoryFileSystem.js:114
throw new MemoryFileSystemError(errors.code.ENOENT, _path);

就报这个错。快疯了。求解

webpack@4报Cannot find module 'extract-text-webpack-plugin'

webpack4 使用 chainwebpack 报错 VueSkeletonWebpackPlugin must be placed after HtmlWebpackPlugin in `plugins`

webpack 版本: 4.26.0
webpack-chain 版本: 5.0.1

报错日志如下：
VueSkeletonWebpackPlugin must be placed after HtmlWebpackPlugin inplugins

通过 webpack-chain 的 toString 打印出的 解析 VueSkeletonWebpackPlugin 的确在 HtmlWebpackPlugin后面(在webpack 配置中通过chainwebpack 的 after 指定顺序)，解析结构片段如下：

/* config.plugin('html-webpack') */
    new HtmlWebpackPlugin(
      {
        filename: <output path>,
        template: <input path>,
        chunks: [
          <chunk-name>
        ],
        inject: true,
        minify: undefined
      }
    ),
    /* config.plugin('vue-skeleton-webpack') */
    new SkeletonPlugin(
      {
        webpackConfig: {
          entry: {
            <chunk-name>: <entry skeleton absolute path>
        }
      }
    )

请问如何针对多页面的不同路由进行配置？

例如：a.html/#/home和b.html/#/home

我没有使用路由，但是routePathTemplate有一个默认值，如何将它关闭呢

SkeletonWebpackPlugin.loader({
    options: {
          entry: chunks,
	  importTemplate: 'import skeleton from \''+path.resolve(__dirname, './assets/components/skeleton/skeleton.vue')+'\';'
   }
 })

文档写的有问题？

开发模式下自动插入路由规则这块文档写得有点问题，或者不明确，如果我没看错的话；

// route object to insert

let routeExpression = `{
    path: '${skeletonRoutePath}',
    name: 'skeleton-${entryName}',
    component: ${entryHash}
},`;

此处是插入进去的路由，component名称为entryHash（使用entry名称生成 hash），已经固定了；

插入导入组件语句源码：

// replace placeholder in routeTpl and importTpl
    let [skeletonRoutePath, importExpression] = [routePathTemplate, importTemplate].map(
        pathStr => pathStr.replace(ENTRY_NAME_HOLDER, entryName)
        .replace(ENTRY_NAME_CAP_HOLDER, entryCap)
        .replace(ENTRY_NAME_HASH_HOLDER, entryHash)
    );
    
// insert import sentence in the head
    source += importExpression;

所以传入的importTemplate字段 必须要有[nameHash]占位符，这样才能替换成entryHash。保证名称一致；

没有将渲染后的dom插入到html中

编译没有通过后，没有将渲染后的dom元素插入到index.html中，只是有一个注释的函数function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }

example 没有 package.json

example 没有 package.json 要怎么npm i 怎么启动

TypeError: Cannot read property 'replace' of undefined

在执行ssr函数的时候报了这个错误，一直没找到解决方案：

TypeError: Cannot read property 'replace' of undefined
    at /C/M/qcs.fe.c/node_modules/webpack/lib/NormalModuleFactory.js:106:27
    at /C/M/qcs.fe.c/node_modules/webpack/lib/NormalModuleFactory.js:59:4
    at handleExternal (/C/M/qcs.fe.c/node_modules/webpack/lib/ExternalModuleFactoryPlugin.js:26:32)
    at /C/M/qcs.fe.c/node_modules/webpack/lib/ExternalModuleFactoryPlugin.js:85:24
    at next (/C/M/qcs.fe.c/node_modules/webpack/lib/ExternalModuleFactoryPlugin.js:59:41)
    at handleExternals (/C/M/qcs.fe.c/node_modules/webpack/lib/ExternalModuleFactoryPlugin.js:63:7)
    at /C/M/qcs.fe.c/node_modules/webpack/lib/ExternalModuleFactoryPlugin.js:83:5
    at applyPluginsAsyncWaterfall (/C/M/qcs.fe.c/node_modules/webpack/lib/NormalModuleFactory.js:236:4)
    at NormalModuleFactory.applyPluginsAsyncWaterfall (/C/M/qcs.fe.c/node_modules/webpack/node_modules/tapable/lib/Tapable.js:260:70)
    at NormalModuleFactory.create (/C/M/qcs.fe.c/node_modules/webpack/lib/NormalModuleFactory.js:220:8)
    at semaphore.acquire (/C/M/qcs.fe.c/node_modules/webpack/lib/Compilation.js:407:18)
    at Semaphore.acquire (/C/M/qcs.fe.c/node_modules/webpack/lib/util/Semaphore.js:16:4)
    at Compilation._addModuleChain (/C/M/qcs.fe.c/node_modules/webpack/lib/Compilation.js:406:18)
    at Compilation.addEntry (/C/M/qcs.fe.c/node_modules/webpack/lib/Compilation.js:494:8)
    at Compiler.compiler.plugin (/C/M/qcs.fe.c/node_modules/webpack/lib/SingleEntryPlugin.js:24:16)
    at Compiler.applyPluginsParallel (/C/M/qcs.fe.c/node_modules/webpack/node_modules/tapable/lib/Tapable.js:293:14)
    at applyPluginsAsync.err (/C/M/qcs.fe.c/node_modules/webpack/lib/Compiler.js:499:9)
    at Compiler.applyPluginsAsyncSeries (/C/M/qcs.fe.c/node_modules/webpack/node_modules/tapable/lib/Tapable.js:195:46)
    at Compiler.compile (/C/M/qcs.fe.c/node_modules/webpack/lib/Compiler.js:492:8)
    at Compiler.runAsChild (/C/M/qcs.fe.c/node_modules/webpack/lib/Compiler.js:286:8)

配置好后可以使用，但是在skeleton.vue里面无法使用alert，navigator等对象方法

希望在skeleton.vue里面判断安卓还是ios，以生成不同的骨架屏，但是提示navigator is not defined，并且building卡住

vue、vue-server-renderer版本不匹配问题

目前安装完vue-skeleton-webpack-plugin启动时，会报以下错误
Vue packages version mismatch:

• [email protected]
• [email protected]

webpack版本号为：2.3.3

目前不希望升级vue版本，请问可否解决该问题？

loader 产出 skeleton 路由 component 有误

examples/multipage3 中的 loader，编译产出 bundle skeleton 路由 component 有误。错误产出代码如下:

new _vueRouter2.default({ mode: 'hash', routes: [{ path: '/page1-skeleton', name: 'skeleton-page1', component: _154496702053738460c0eb5767403aa7cced9ee19909b }
控制台报错如下：

SkeletonWebpackPlugin中的insertAfter 选填，能否自动的根据不同的页面，自动设置不同的id值

SkeletonWebpackPlugin中的insertAfter 选填，渲染 DOM 结果插入位置，默认值为'

'，
由于是多页应用，所以每个页面中的vue的挂载id的值，会根据不同的页面，id的值会不同，
能否自动的根据不同的页面，自动设置不同的id值比如'

'

未知WARNING

自己配置的基于最新 vue-cli2 的多页骨架屏
运行后提示：WARNING Compiled with 0 warnings
没法看到程序运行的端口，也就是没有提示Compiled success Your application is running here: http://localhost:8081，但是再浏览器访问还是有效果的。
这个体验就有点不愉快了，去掉插件就ok，不知是什么问题，是否有解决办法

多skeleton使用时报错

var skeletonCss = childCompilation.assets[outputCSSPath].source();
TypeError: Cannot read property 'source' of undefined
at /Users/leo/Documents/Project/multi-skeleton-demo/node_modules/vue-skeleton-webpack-plugin/lib/ssr.js:75:74
at compile (/Users/leo/Documents/Project/multi-skeleton-demo/node_modules/webpack/lib/Compiler.js:300:11)
at applyPluginsAsync.err (/Users/leo/Documents/Project/multi-skeleton-demo/node_modules/webpack/lib/Compiler.js:510:14)
at next (/Users/leo/Documents/Project/multi-skeleton-demo/node_modules/tapable/lib/Tapable.js:202:11)
at Compiler. (/Users/leo/Documents/Project/multi-skeleton-demo/node_modules/webpack/lib/CachePlugin.js:78:5)
at Compiler.applyPluginsAsyncSeries (/Users/leo/Documents/Project/multi-skeleton-demo/node_modules/tapable/lib/Tapable.js:206:13)
at compilation.seal.err (/Users/leo/Documents/Project/multi-skeleton-demo/node_modules/webpack/lib/Compiler.js:507:11)
at Compilation.applyPluginsAsyncSeries (/Users/leo/Documents/Project/multi-skeleton-demo/node_modules/tapable/lib/Tapable.js:195:46)
at applyPluginsAsync.err (/Users/leo/Documents/Project/multi-skeleton-demo/node_modules/webpack/lib/Compilation.js:683:19)
at Compilation.applyPluginsAsyncSeries (/Users/leo/Documents/Project/multi-skeleton-demo/node_modules/tapable/lib/Tapable.js:195:46)
at applyPluginsAsync.err (/Users/leo/Documents/Project/multi-skeleton-demo/node_modules/webpack/lib/Compilation.js:674:11)
at Compilation.applyPluginsAsyncSeries (/Users/leo/Documents/Project/multi-skeleton-demo/node_modules/tapable/lib/Tapable.js:195:46)
at applyPluginsAsync.err (/Users/leo/Documents/Project/multi-skeleton-demo/node_modules/webpack/lib/Compilation.js:669:10)
at next (/Users/leo/Documents/Project/multi-skeleton-demo/node_modules/tapable/lib/Tapable.js:202:11)
at Compilation. (/Users/leo/Documents/Project/multi-skeleton-demo/node_modules/extract-text-webpack-plugin/dist/index.js:275:11)
at Compilation.applyPluginsAsyncSeries (/Users/leo/Documents/Project/multi-skeleton-demo/node_modules/tapable/lib/Tapable.js:206:13)
error An unexpected error occurred: "Command failed.

没有使用html-webpack-plugin能否使用该插件？

按照vue-hackernews-2.0，实现了ssr，客户端方面使用了 VueSSRClientPlugin 所以没有使用html-webpack-plugin，能否使用该插件实现骨架屏？

用什么命令启动服务才能查看examples目录下的页面？

E:\git\my-vue-scaffold\node_modules\memory-fs\lib\MemoryFileSystem.js:114 throw new MemoryFileSystemError(errors.code.ENOENT, _path); ^ Error: no such file or directory

引入vue-skeleton-webpack-plugin插件，执行，却报memory-fs读取不到文件，显示file不存在，排查了一下最终生成的webpack.skeleton.conf生成的对象，如下：
{ target: 'node', devtool: false, entry: './src/skeleton/foo/entry-skeleton.js', output: { path: 'E:\\git\\my-vue-scaffold\\dist', libraryTarget: 'commonjs2', filename: 'skeleton-foo.js' }, resolve: { extensions: [ '.js', '.json', '.vue', '.scss', '.css' ], alias: { '~': 'E:\\git\\my-vue-scaffold\\src', 'vue$': 'vue/dist/vue.esm.js' }, modules: [ 'E:\\git\\my-vue-scaffold\\src', 'node_modules' ] }, module: { rules: [ [Object], [Object], [Object] ] }, externals: [Function], plugins: [ ExtractTextPlugin { filename: 'skeleton-foo.css', id: 2, options: {} } ] }，
以及打印出outputPath、outputCssPath，如下：
E:\git\my-vue-scaffold\dist\skeleton-foo.js E:\git\my-vue-scaffold\dist\skeleton-foo.css，
感觉没什么问题为什么还会报这错呢，作者有空的话帮忙解惑一下呢。
github地址： https://github.com/xiaobinwu/my-vue-scaffold

SPA配置多个skeleton出现的问题

您好，您开发的插件非常优秀，我已经成功配置了单个skeleton。关于多个skeleton，我的plugins的配置是这样的

new SkeletonWebpackPlugin({
      webpackConfig: require('./webpack.skeleton.conf'),
      quiet: true,
      minimize: true,
      router: {
        mode: 'history',
        routes: [
          {
            path: '/detail',
            skeletonId: 'skeleton1'
          },
          {
            path: '/product-list',
            skeletonId: 'skeleton2'
          }
        ]
      }
    }),

但是似乎这两个skeleton都没有起作用，然后我这样配置的时候：

new SkeletonWebpackPlugin({
      webpackConfig: require('./webpack.skeleton.conf'),
      quiet: true,
      minimize: true,
      router: {
        mode: 'history',
        routes: [
          {
            path: '/',
            skeletonId: 'skeleton1'
          },
          {
            path: '/product-list',
            skeletonId: 'skeleton2'
          }
        ]
      }
    }),

所有的页面都会应用skeleton1，就算到'/product-list'路由的时候也同样是使用了skeleton1，是我哪里配得不对吗？请指教。

npm run build 报css错误

骨架屏如何解决SEO问题？

pre-render:

<body>
  <div id="app><skeleton-dom /></div>
</body>

init:

<body>
  <div id="app><render-dom /></div>
</body>

路由history模式下，不支持路由base

路由设置了history模式，并且设置了基准路径，无法显示骨架屏
如：
router: { mode: 'history', base: '/�test/', routes: [{ path: '/list', skeletonId: 'list-skeleton' }, { path: '/', skeletonId: 'index-skeleton' }] }

看了一下源码是直接拿location.pathname 与path匹配导致匹配不成功，可否增加个base参数， isMatched函数中路径加上base路径后再匹配？

无法注入

提示 Empty entry for skeleton, please check your webpack.config.

路由设置按需加载后会出现白屏

项目中路由设置按需加载，骨架页面加载完毕消失后与按需加载的js加载页面之间会进入一段空档期，出现白屏，也就是骨架页面消失后，才开始加载按需加载的js。这样这个插件就没有意义了呀

修改文件重新编译时，构建生成的文件并没有更改？

使用extract-text-webpack-plugin监听骨架屏的文件，文件更改时，重新进行编译，但是这时候骨架屏生成的文件并没有更新，这个是什么原因呢？