问题描述,修改dllPlugin后,加载网页报错,Cannotreadproperty'call'ofundefined。原因:以util.dll.js为例。编译后lodash和dayjs会被打包成util.dll.js(老版本util.dll.js)//webpack.dll.config.jsmodule.exports={...,entry:{util:['lodash','dayjs'],...}}修改入口中的util,增加一个exceljs模块。//webpack.dll.config.jsmodule.exports={...,entry:{util:['lodash','dayjs','exceljs'],...}}会把lodash,dayjs和exceljs打包成util.dll.js(新版util.dll.js)项目编译后,使用exceljs的地方会指向util.dll.js。这时候如果用户浏览器的缓存还在,一旦加载使用exceljs的页面,由于缓存的存在,文件指向旧版本的util.dll.js,并没有exceljs旧版本的util.dll.js会报错。(Cannotreadproperty'call'ofundefined)解决这个问题的思路是在文件名中区分新旧版本的util.dll.js。这样,有两种思路:1、在文件名中加入hash。2.为文件名添加时间戳。类型1,它不起作用。说说实施方案和问题。添加[hash:8]到输出//webpack.dll.config.jsmodule.exports={...,entry:{util:['lodash','dayjs'],...},output:{...filename:'[name].[hash:8].dll.js'}}webpack可以识别这个[hash:8]通配符,dll编译成功后添加文件名。哈希已成功添加。(如/dll/util.2d0b32f5.1aefa32d.js)但是在vue.config.js中导入dllplugin的过程中,无法动态导入带hash值的dll文件名。所以这条路行不通。类型2,加时间戳(加年月日)是可行的。先创建一个时间戳,要么通过原生js的Date对象,要么通过第三方库。这里我们以dayjs为例。//webpack.dll.config.jsconstdayjs=require("dayjs");constdate=dayjs.format("YYYYMMDD");module.exports={...,entry:{util:['lodash','dayjs'],...},output:{...filename:`[name].${date}.dll.js`}}(编译后的dll文件名,如/dll/util.20220210.js)还在vue.config.js中创建时间戳(年、月、日)//vue.config.jsconstdayjs=require("dayjs");constdate=dayjs.format("YYYYMMDD");在fileArr中,修改filePath配置项(结合我写的https://segmentfault.com/a/11...文章)将上图红框部分的模板字符串改为dll/${dllName}。${date}.dll.js完成
