monaco-editor封装vue npm库后，ChunkLoadError: Loading chunk 55 failed解决方案

背景

问题描述：https://www.jianshu.com/p/1723eb6fbaeb

image

理清问题

问题1.http://localhost:8081/js/monaco-sqlpad.umd.min.55.js加载失败
问题2.http://localhost:8081/js/fonts/codicon.a609dc0f.ttf加载失败

文件加载错误后的影响

问题1会导致monaco-editor代码高亮功能失效

问题2会导致monaco-editor各种图标icon无法显示

解决思路

既然错误告诉咱http://localhost:8081/js/monaco-sqlpad.umd.min.55.js、http://localhost:8081/js/fonts/codicon.a609dc0f.ttf加载失败，那就想办法让它加载成功。

怎么才能访问到monaco-sqlpad.umd.min.55.js、 codicon.a609dc0f.ttf?

使用copy-webpack-plugin插件把文件copy到js/目录下

const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  configureWebpack: {
    plugins: [new CopyWebpackPlugin(
      {
        patterns: [
          {
            context: 'node_modules/monaco-sqlpad/dist/',
            from: '*.umd.min.*.js',
            to: 'js/',
            toType: 'dir'
          },
          {
            from: 'node_modules/monaco-sqlpad/dist/editor.worker.js',
            to: 'editor.worker.js',
            toType: 'file'
          },
          {
            context: 'node_modules/monaco-sqlpad/dist/',
            from: 'fonts',
            to: 'js/fonts',
            toType: 'dir'
          }
        ]
      }
    )]
  }
}

问题解决

image.png

如图所示所有问题文件都按照咱们的想法加载，语法高亮和icon显示也都正常。问题解决

preview.gif

思考

1.为什么文件会加载失败？webpack不是帮我打包了吗？

webpack是打包了，但是由于monaco-editor会动态加载editor.worker.js文件启动一个webwoker，（比如monaco-editor切换语言的时候，就会动态加载对应的worker文件）。这些被动态加载的文件需要被当作静态资源放到一个monaco-editor能找得到的目录。

2.为什么不使用monaco-editor-webpack-plugin？

如果是一个独立的web应用直接使用moanco-editor时使用monaco-webpack-plugin,这个插件会自动帮你处理文件加载及webwoker文件的路径问题。因为我这个是一个lib库所以需要自己使用copy-webpack-plugin来做这件事。