Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/linpenghui958/skeleton-test
page-skeleton-webpack-plugin demo
https://github.com/linpenghui958/skeleton-test
Last synced: about 2 months ago
JSON representation
page-skeleton-webpack-plugin demo
- Host: GitHub
- URL: https://github.com/linpenghui958/skeleton-test
- Owner: linpenghui958
- License: mit
- Created: 2018-11-15T14:04:31.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2018-11-15T14:33:43.000Z (almost 6 years ago)
- Last Synced: 2024-06-02T16:35:04.494Z (4 months ago)
- Language: JavaScript
- Size: 97.7 KB
- Stars: 11
- Watchers: 1
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-skeleton-test(demo)
> page-skeleton-webapack-plugin demo
> vue骨架屏demo（基于PSWP）
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
```
``` bash
# enter togglerBar in console and
```
> In the development page, use CtrlOrCmd + enter to call out the plugin interactive interface, or enter the toggleBar callout interface in the browser's JavaScript console.
Click the button in the interactive interface to preview the skeleton page. This process may take about 20s. After the plugin is ready for the skeleton page, it will automatically open the preview page through the browser, as shown below.
```bash
# build for production with minification
npm run build
```
### how to use page-skeleton-webpack-plugin
如何使用PSWP插件进行自动化生产多路由骨架片
第一步，新建一个项目，并安装相关依赖
```
vue init webpack skeleton-test
cd skeleton-test
npm install
npm install --save-dev page-skeleton-webpack-plugin
npm install --save-dev html-webpack-plugin
```
第二步，然后在build/webpack.base.conf.js中
```js
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { SkeletonPlugin } = require('page-skeleton-webpack-plugin')
const path = require('path')
const webpackConfig = {
entry: 'index.js',
output: {
path: __dirname + '/dist',
filename: 'index.bundle.js'
},
plugin: [
new HtmlWebpackPlugin({
// 本身的配置项
}),
new SkeletonPlugin({
pathname: path.resolve(__dirname, '../shell'), // customPath为来存储 shell 文件的地址
staticDir: path.resolve(__dirname, '../dist'), // 最好和 `output.path` 相同
routes: ['/', '/test'], // 将需要生成骨架屏的路由添加到数组中，测试根路径和/test路径
})
]
}
```
第三步，运行项目，生产skeleton-page
- 还是在控制台输入toggleBar后点击页面上方的control bar唤醒
右上角依次为，预览不同路由生产的骨架屏，手机预览，写入本地文件
可以看到现在更新了许多功能，在预览无误后
点击右上方写入本地文件即可进行最后的打包预览
可以看到项目目录多了一个shell路径，这跟之前设置的保存路径一致
第四步，打包预览效果
```js
npm run build
cd dist
http-server
```
然后进入浏览器预览
看一下根路径
看一下/test路径
ps！！！前方高能预警
这里是以vue-cli为基础进行的测试
在初始化的模板中，webpack分为base、dev、 prod三个文件
这里因为PSWP为dev和prod都需要的插件，所以放在base文件中
但是在第一次打包后预览，笔者发现prod环境并没有生效
原因是在webpack.prod.conf.js中的HtmlWebpackPlugin配置中
```js
plugins: [
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
// removeComments: true, 移除注释
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),
]
```
这里有一项minify的配置为移除注释，查看minify的[文档](https://github.com/kangax/html-minifier#options-quick-reference)
笔者觉得很有可能是这个配置，移除了index.html中的给移除了，导致打包后未能生效。
在注释掉这一选项后，dev和prod环境均正常