How to run server in @vue/cli@3.0.0-beta.10

[shoyuf]

Description

add webpack plugin config in vue.config.js

const { SkeletonPlugin } = require("page-skeleton-webpack-plugin");
const path = require("path");
module.exports = {
  configureWebpack: {
    plugins: [
      new SkeletonPlugin({
        pathname: path.resolve(__dirname, "./shell"), // 用来存储 shell 文件的地址
        staticDir: path.resolve(__dirname, "./shelldist"), // 最好和 `output.path` 相同
        routes: ["/"] // 将需要生成骨架屏的路由添加到数组中
      })
    ]
  }
};

run yarn serve
output:

 ERROR  Failed to compile with 1 errors                                                                                                                                                    15:19:28

  TypeError: callback is not a function

  - skeletonPlugin.js:39 compilation.plugin
    [page-skeleton-webpack-plugin-demo]/[page-skeleton-webpack-plugin]/src/skeletonPlugin.js:39:7


  - index.js:165
    [page-skeleton-webpack-plugin-demo]/[preload-webpack-plugin]/build/index.js:165:15


  - index.js:165
    [page-skeleton-webpack-plugin-demo]/[preload-webpack-plugin]/build/index.js:165:15


  - new Promise


  - Hook.js:35 AsyncSeriesWaterfallHook.lazyCompileHook [as _promise]
    [page-skeleton-webpack-plugin-demo]/[tapable]/lib/Hook.js:35:21

  - index.js:673
    [page-skeleton-webpack-plugin-demo]/[html-webpack-plugin]/index.js:673:47

  - index.js:178 Promise.resolve.then.then.then.then.then.then.html
    [page-skeleton-webpack-plugin-demo]/[html-webpack-plugin]/index.js:178:18


  - next_tick.js:118 process._tickCallback
    internal/process/next_tick.js:118:7

Plugin configration

for example:

new SkeletonPlugin({
  pathname: path.resolve(__dirname, `./src`),
  port: '7890',
  loading: 'spin',
  svg: {
    color: '#EFEFEF',
    shape: 'circle',
    shapeOpposite: ['.red']
  },
  image: {
    shape: 'rect', // `rect` | `circle`
    color: '#EFEFEF',
    shapeOpposite: ['.white']
  },
  pseudo: {
    color: '#EFEFEF', // or transparent
    shape: 'circle', // circle | rect
    shapeOpposite: ['.apple', '.pen']
  },
  button: {
    color: '#EFEFEF',
    excludes: ['.center a']
  },
  defer: 5000,
  excludes: [],
  remove: [],
  hide: ['.ag-text', '.ag-image'],
  grayBlock: ['#header'],
  cssUnit: 'vw',
  cookies: [{
    name: 'SID',
    value: 'xxxxxx',
    url: 'https://xx.xxx.xx'
  }, {
    name: 'USERID',
    value: 'xxxxxx',
    url: 'https://xx.xxx.xx'
  }]
})

Versions

• Page Skeleton: 0.10.1
• Webpack: 3.12.0

[HenryWong-fe]

遇到同样的报错信息,使用官方脚手架搭建,并非@vue/cli@3.0,升级webpack,安装webpack-cli,升级html-webpack-plugin,升级vue-loader,就会出现这样的问题,单纯升级html-webpack-plugin至最新没有问题

[Jocs]

@shoyuf @leo-wj910729 已经发布0.10.12 版本，全面支持 webpack 4，应该不会出现类似问题了。