背景
問(wèn)題描述：http://www.reibang.com/p/1723eb6fbaeb
理清問(wèn)題
問(wèn)題1.http://localhost:8081/js/monaco-sqlpad.umd.min.55.js加載失敗
問(wèn)題2.http://localhost:8081/js/fonts/codicon.a609dc0f.ttf加載失敗
文件加載錯(cuò)誤后的影響
問(wèn)題1會(huì)導(dǎo)致monaco-editor代碼高亮功能失效
問(wèn)題2會(huì)導(dǎo)致monaco-editor各種圖標(biāo)icon無(wú)法顯示
解決思路
既然錯(cuò)誤告訴咱http://localhost:8081/js/monaco-sqlpad.umd.min.55.js特姐、http://localhost:8081/js/fonts/codicon.a609dc0f.ttf加載失敗，那就想辦法讓它加載成功沫浆。
怎么才能訪問(wèn)到monaco-sqlpad.umd.min.55.js、 codicon.a609dc0f.ttf?
使用copy-webpack-plugin插件把文件copy到j(luò)s/目錄下
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'
}
]
}
)]
}
}
問(wèn)題解決
如圖所示所有問(wèn)題文件都按照咱們的想法加載，語(yǔ)法高亮和icon顯示也都正常郁油。問(wèn)題解決??
思考
1.為什么文件會(huì)加載失斨粝浴案站？webpack不是幫我打包了嗎？
webpack是打包了蟆盐，但是由于monaco-editor會(huì)動(dòng)態(tài)加載editor.worker.js文件啟動(dòng)一個(gè)webwoker，（比如monaco-editor切換語(yǔ)言的時(shí)候博助，就會(huì)動(dòng)態(tài)加載對(duì)應(yīng)的worker文件）富岳。這些被動(dòng)態(tài)加載的文件需要被當(dāng)作靜態(tài)資源放到一個(gè)monaco-editor能找得到的目錄。
2.為什么不使用monaco-editor-webpack-plugin城瞎？
如果是一個(gè)獨(dú)立的web應(yīng)用直接使用moanco-editor時(shí)使用monaco-webpack-plugin,這個(gè)插件會(huì)自動(dòng)幫你處理文件加載及webwoker文件的路徑問(wèn)題。因?yàn)槲疫@個(gè)是一個(gè)lib庫(kù)所以需要自己使用copy-webpack-plugin來(lái)做這件事飒箭。
