令人意想不到的结果产生,以下是报错截图。
这个原因是应为没有引入 bundle.js 文件。
重新配置文件:
题外:使用 externals 方法时,⚠️注意在 react-rom 至 16.0.0 版本后,为兼容 es6 ,产生了多个 rc 和 beta 版本,同时编译生成cjs 、umd两个打包文件。
cjs 、umd 该选哪个?cjs、umd 的区别在于?
其实这些都是 JS 模块规范区别!!!
CommonJS(cjs)
同步, 主要为了用于服务端node.js使用
module定义模块,module.export导出模块内容,require引入模块
AMD
异步, 用法为define(['dep1','dep2'],function(dep1,dep2){...});, 代表库 RequireJS
运行时先检查依赖库, 根据配置文件获取实际路径, 在dom中动态插入script脚本, 加载完毕后触发onLoad事件通知加载完成, 所有依赖都加载完毕后执行回调, 并将依赖作为参数传递进去
CMD
异步, 用法为define(function(require,exports,module){...});, 代表库 SeaJS
将回调函数转为字符串, 使用正则提取require语法获取依赖, 根据配置文件获取实际路径, 在dom中动态插入script脚本, 加载完毕后触发onLoad事件通知加载完成, 所有依赖都加载完毕后执行回调, 并将回调中的require语句替换为依赖
比如回调中存在var $ = require('jquery'), 则回调执行时 $ 即为jquery实例
UMD
umd是AMD和CommonJS的糅合, 是跨平台的解决方案. UMD先判断是否支持Node.js的模块exports是否存在, 存在则使用Node.js模块模式. 在判断是否支持AMD(define是否存在), 存在则使用AMD方式加载模块
ES6 Module
来自 ECMAScript 2016, 浏览器暂时未支持, 需要转成 ES5 运行
参考:JS模块规范(CommonJS,AMD,CMD,UMD,ES6)
总结:最后还是决定统一使用DLl方法
优:
1、代码通俗易懂
2、不会因资源均走缓存,而产生未知错误
3、不需要考虑版本选择问题
劣:
参考链接:
1、教你如何玩转webpack.DllPlugin
End
谢谢观看,欢迎交流
领取专属 10元无门槛券
私享最新 技术干货