背景
问题描述：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来做这件事。
