共计 1038 个字符,预计需要花费 3 分钟才能阅读完成。
问题
事件起因是我写了一个基于 vue 的图片上传插件,用 vue cli 打包为库后,想在本地引入 umd 包来测试插件能不能用,后果报错,次要是 Unexpected token ‘<‘ 和 ChunkLoadError:Loading chunk xx failed:
点入报错的文件链接,发现是 <!DOCTYPE html> 标签谬误:
搜寻一番后,根本能够确定是引入谬误,然而不晓得起因。
尝试解决
在搜索引擎挣扎许久,也尝试过更改 publicPath、增加 @babel/plugin-transform-modules-umd 等均有效,次要是不晓得根本原因。
在看到这两篇博文(webpack 之 Loading chunk x failed、Vue CLI build –target lib 时如何防止打包成多个 umd.js 文件)后,分割联合,猜想起因是分包加载谬误:webpack 打包库会将代码分成多个包(看下图),在 vue 我的项目中只引入 *.umd.js,然而其余分包没有按程序引入,因为被浏览器拦挡申请篡改了分包内容(具体可见下面提及的第一篇博文),不能保障代码的程序执行。
那么能够尝试将代码打包为一个文件,这样不须要保障 script 代码执行程序,试试是否见效。
须要批改 vue.config.js:
- 限度打包为一个包
- 批改 css.extract 为 false,示意不将 css 文件独自抽离,省得用户本人导入 CSS
// vue.config.js
const webpack = require("webpack");
module.exports = {
css: {extract: false},
configureWebpack: {
plugins: [
// 限度只打一个包,不分 Chunk
new webpack.optimize.LimitChunkCountPlugin({maxChunks: 1})
],
// 当库外面引入了比拟大的文件时,为了不影响主包大小,须要设置下该包应用内部引入
externals: {echarts: "echarts"}
}
};
再次打包:
尝试引入应用,果然胜利了:
总结
尽管依着下面的思路问题是解决了,然而是否就是这个起因,自己也无奈非常确定(兴许是歪打正着了 :))。
如果有人有更好的想法,欢送探讨 ^_^
更多学习笔记请戳:https://github.com/6fa/WebKnowledge
参考
webpack 之 Loading chunk x failed
Vue CLI build –target lib 时如何防止打包成多个 umd.js 文件