vue-cli 中 worker-loader 使用报错 `object { worker?, publicPath?, filename?, chunkFilename?, inline?, esM

vue-cli 中 worker-loader 使用报错 object { worker?, publicPath?, filename?, chunkFilename?, inline?, esModule? } 及 开环境 worker 脚本热更新问题

推荐按照 npm 文档使用worker-loader

有些社区和博客描述和使用说明由于翻译等原因存在一定的问题

错误信息

 ERROR  Failed to compile with 1 error                                                                                                                                                                           上午9:45:46
 error  in ./src/utils/dictate/recorder.worker.js

Syntax Error: ValidationError: Invalid options object. Worker Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'name'. These properties are valid:
   object { worker?, publicPath?, filename?, chunkFilename?, inline?, esModule? }


 @ ./src/utils/dictate/recorder.js 5:0-39 15:19-25
 @ ./src/utils/dictate/dictate.js
 @ ./node_modules/_cache-loader@4.1.0@cache-loader/dist/cjs.js??ref--12-0!./node_modules/_babel-loader@8.2.2@babel-loader/lib!./node_modules/_cache-loader@4.1.0@cache-loader/dist/cjs.js??ref--0-0!./node_modules/_vue-loader@15.9.6@vue-loader/lib??vue-loader-options!./src/views/dictate/index.vue?vue&type=script&lang=js&
 @ ./src/views/dictate/index.vue?vue&type=script&lang=js&
 @ ./src/views/dictate/index.vue
 @ ./src/views sync ^\.\/.*$
 @ ./src/store/modules/route.js
 @ ./src/store/index.js
 @ ./src/main.js
 @ multi ./node_modules/_webpack-dev-server@3.11.2@webpack-dev-server/client?http://192.168.5.210:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

错误原因及处理

chainWebpack(config) {
    config.plugins.delete('preload') // TODO: need test
    config.plugins.delete('prefetch') // TODO: need test

    config.module
      .rule('worker-loader')
      .test(/\.worker\.js$/)
      .use('worker-loader')
      .loader('worker-loader')
      /**
       * 根据错误提示：- options has an unknown property 'name'.
       *    得知：options中选项具有未知属性“name”，所以报错
       * 根据提示：These properties are valid：object { worker?, publicPath?, filename?, chunkFilename?, inline?, esModule? }
       *    得知：options仅支持这些属性  worker?, publicPath?, filename?, chunkFilename?, inline?, esModule?
       *    更改：将name属性修改为支持的filename即可
       */
      //.options({ name: 'WorkerName.[hash].js' })
      .options({ filename: 'WorkerName.[hash].js' })
      .end()

    config.output.globalObject('this')
    /* worker  热更新 */
    config.module.rule('js').exclude.add(/\.worker\.js$/);

    const oneOfsMap = config.module.rule('scss').oneOfs.store

worker-loader 可能由于版本原因导致文档中options说明与实际使用有不符，以下为类官网选项说明：

本人最终vue.config.js文件下worker-loader配置

  configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src'),
        '@crud': resolve('src/components/Crud')
      }
    }
  },
  /**
   * 有博客说明使用worker-loader添加此属性，但我没有使用，没有影响编译和打包
   * 可通过vue-cli文档查明
   */
  // parallel: false,
  chainWebpack(config) {
    config.plugins.delete('preload') // TODO: need test
    config.plugins.delete('prefetch') // TODO: need test
    /***** worker-loader Start *****/
    config.module
      .rule('worker-loader')
      .test(/\.worker\.js$/)
      .use('worker-loader')
      .loader('worker-loader')
      /* 之前导致报错的位置 */
      .options({ filename: 'WorkerName.[hash].js' })
      .end()
      
    config.output.globalObject('this')
    /* worker  热更新 */
    config.module.rule('js').exclude.add(/\.worker\.js$/);
    /***** worker-loader End *****/

    const oneOfsMap = config.module.rule('scss').oneOfs.store
    oneOfsMap.forEach(item => {
      item
        .use('sass-resources-loader')
        .loader('sass-resources-loader')
        .options({
          // scss 全局变量
          resources: ['src/assets/styles/variables.scss', 'src/assets/styles/mixin.scss']
        })
        .end()
    })

打包后效果

相关资料链接

npm：worker-loader
vue-cli：parallel
Web Workers API