lavas-project / vue-skeleton-webpack-plugin Goto Github PK
View Code? Open in Web Editor NEWLavas webpack plugin: skeleton solution for PWA webshell
vue-skeleton-webpack-plugin's Issues
loader 产出 skeleton 路由 component 有误
examples/multipage3 中的 loader，编译产出 bundle skeleton 路由 component 有误。错误产出代码如下:
new _vueRouter2.default({ mode: 'hash', routes: [{ path: '/page1-skeleton', name: 'skeleton-page1', component: _154496702053738460c0eb5767403aa7cced9ee19909b }
控制台报错如下：
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
vue、vue-server-renderer版本不匹配问题
目前安装完vue-skeleton-webpack-plugin启动时，会报以下错误
Vue packages version mismatch:
webpack版本号为：2.3.3
目前不希望升级vue版本，请问可否解决该问题？
无法注入
提示 Empty entry for skeleton, please check your webpack.config.
用什么命令启动服务才能查看examples目录下的页面？
能提供一下@vue/cli 3.0的示例？
请问vue-cli3.0构建的项目注入的html和css如何压缩？
请问vue-cli3.0构建的项目注入的html和css如何压缩？
example 没有 package.json
example 没有 package.json 要怎么npm i 怎么启动
路由history模式下，不支持路由base
路由设置了history模式，并且设置了基准路径，无法显示骨架屏
如：
router: { mode: 'history', base: '/�test/', routes: [{ path: '/list', skeletonId: 'list-skeleton' }, { path: '/', skeletonId: 'index-skeleton' }] }
看了一下源码是直接拿location.pathname 与path匹配导致匹配不成功，可否增加个base参数， isMatched函数中路径加上base路径后再匹配？
文档写的有问题？
开发模式下自动插入路由规则这块文档写得有点问题，或者不明确，如果我没看错的话；
// 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。保证名称一致；
请问如何针对多页面的不同路由进行配置？
例如：a.html/#/home和b.html/#/home
骨架屏如何解决SEO问题？
pre-render:
<body>
<div id="app><skeleton-dom /></div>
</body>
init:
<body>
<div id="app><render-dom /></div>
</body>
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，是我哪里配得不对吗？请指教。
vue-cli3 骨架屏开发阶段未注入样式
例子/examples/vue-cli3 未实现开发阶段注入骨架屏样式
若在vue.config.js 开启 css.extract = true 开发阶段又无法实现样式热加载，请问该如何解决
webpack4 support
我没有使用路由，但是routePathTemplate有一个默认值，如何将它关闭呢
SkeletonWebpackPlugin.loader({
options: {
entry: chunks,
importTemplate: 'import skeleton from \''+path.resolve(__dirname, './assets/components/skeleton/skeleton.vue')+'\';'
}
})
多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.
window.STYLE_READY this is means?
SkeletonWebpackPlugin中的insertAfter 选填，能否自动的根据不同的页面，自动设置不同的id值
SkeletonWebpackPlugin中的insertAfter 选填，渲染 DOM 结果插入位置，默认值为'
'，
由于是多页应用，所以每个页面中的vue的挂载id的值，会根据不同的页面，id的值会不同，
能否自动的根据不同的页面，自动设置不同的id值比如'
由于是多页应用，所以每个页面中的vue的挂载id的值，会根据不同的页面，id的值会不同，
能否自动的根据不同的页面，自动设置不同的id值比如'
'
配置好后可以使用，但是在skeleton.vue里面无法使用alert，navigator等对象方法
希望在skeleton.vue里面判断安卓还是ios，以生成不同的骨架屏，但是提示navigator is not defined，并且building卡住
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>
}
}
)加入了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"
]
}
};
SPA 中多路由正则生成有误
问题描述
相关 ISSUE #18
SPA 多路由多个 Skeleton 情况下 path 参数可以是字符串或者正则。
当填写字符串例如 /page1 时，内部转成的正则是 /^\/page1(?:\/)?$/i，无法匹配 /page1?a=1 这样的路由路径。
问题原因
使用 path-to-regexp 将字符串转正则，默认情况下 end: true 会要求匹配结尾，这就导致 /page1 无法匹配带参数的情况了。
解决方法
两种方式：
path参数直接使用正则path: /^\/page1/path参数继续使用字符串，内部转换成正则时end: false
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
没有将渲染后的dom插入到html中
编译没有通过后，没有将渲染后的dom元素插入到index.html中，只是有一个注释的函数function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }
增加 Hotreload 功能
目前修改骨架屏组件需要重启才能生效。
骨架中的css没有被copy到html中
按照demo在vue-cli的基础上修改,骨架vue文件中的动漫元素已经被copy到html中了 但是css没有,请问这是啥原因呢?
没有使用html-webpack-plugin能否使用该插件？
按照vue-hackernews-2.0，实现了ssr，客户端方面使用了 VueSSRClientPlugin 所以没有使用html-webpack-plugin，能否使用该插件实现骨架屏？
多页面项目里面不一定每个页面都有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...
未知WARNING
自己配置的基于最新 vue-cli2 的多页骨架屏
运行后提示：WARNING Compiled with 0 warnings
没法看到程序运行的端口，也就是没有提示Compiled success Your application is running here: http://localhost:8081，但是再浏览器访问还是有效果的。
这个体验就有点不愉快了，去掉插件就ok，不知是什么问题，是否有解决办法
打包报错
照着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)
安装后提示vue、vue-server-renderer版本不匹配
安装完,运行报错，如下；
Error:
Vue packages version mismatch:
安装包版本：
“webpack": 3.12.0
"vue-skeleton-webpack-plugin": "1.2.2";
谢谢了；
loader.js
// insert import sentence in the head
source += importExpression;
这里 组件import插到source的尾部，不会出现问题吗？
是否有demo线上能访问下?
请问有具体的demo或者说明具体怎么使用您的插件呢?恕我愚昧,研究两三天还没看懂具体怎么操作实现功能,谢谢!
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
}),
路由设置按需加载后会出现白屏
项目中路由设置按需加载，骨架页面加载完毕消失后与按需加载的js加载页面之间会进入一段空档期，出现白屏，也就是骨架页面消失后，才开始加载按需加载的js。这样这个插件就没有意义了呀
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项目入口需要传递动态的参数)
[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 不知道会不会有影响
MPA，但是没有使用vue-route的情况下能不能使用这个插件呢。
报这个错是什么意思呢？
您好，非常感谢您贡献的插件，我在使用的过程中遇到了这个问题
/usr/local/var/www/Megvii/alfar-frontend-m/node_modules/memory-fs/lib/MemoryFileSystem.js:114
throw new MemoryFileSystemError(errors.code.ENOENT, _path);
这个怎么解决呢
骨架屏结束的时机,能否在组件加载完数据之后
目前遇到的问题是骨架屏展示结束之后,页面还是要去请求数据,还是会有一段时间的白屏效果
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)
如何才能配置成功啊？失败N次了。
单页面
node_modules\memory-fs\lib\MemoryFileSystem.js:114
throw new MemoryFileSystemError(errors.code.ENOENT, _path);
就报这个错。快疯了。求解
在 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 配置对象了。
修改文件重新编译时，构建生成的文件并没有更改？
使用extract-text-webpack-plugin监听骨架屏的文件，文件更改时，重新进行编译，但是这时候骨架屏生成的文件并没有更新，这个是什么原因呢？
开发模式下获取不到skeletonCSS
请问路由支持hash模式吗
webpack@4报Cannot find module 'extract-text-webpack-plugin'
npm run build 报css错误
单页面应用的多个骨架问题
如何在vue-cli脚手架搭建的模板中，编写适合不同页面的多个骨架？
examples 中的 multi-skeleton是例子吗？ 感觉例子不是太好理解
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.