webpack-模块化兼容性

墨蓝 2021-08-27 00:58 412阅读 0赞

# 模块化兼容性 #

由于webpack同时支持CommonJS和ES6 module，因此需要理解它们互操作时webpack是如何处理的

## 同模块化标准 ##

如果导出和导入使用的是同一种模块化标准，打包后的效果和之前学习的模块化没有任何差异

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LdBKUEUt-1582007473088)(assets/2020-01-07-07-50-09.png)\]][img-LdBKUEUt-1582007473088_assets_2020-01-07-07-50-09.png]

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mrSPbLXh-1582007473090)(assets/2020-01-07-07-53-45.png)\]][img-mrSPbLXh-1582007473090_assets_2020-01-07-07-53-45.png]

## 不同模块化标准 ##

不同的模块化标准，webpack按照如下的方式处理  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTY3Nw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTY3Nw_size_16_color_FFFFFF_t_70 1]

## 最佳实践 ##

代码编写最忌讳的是精神分裂，选择一个合适的模块化标准，然后贯彻整个开发阶段。

[img-LdBKUEUt-1582007473088_assets_2020-01-07-07-50-09.png]: /images/20210813/40ec15aaf75949b1b9e239730f63db19.png
[img-mrSPbLXh-1582007473090_assets_2020-01-07-07-53-45.png]: /images/20210813/a4529d8a4faa4120ace26412335e929a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTY3Nw_size_16_color_FFFFFF_t_70]: /images/20210813/7f1d8d72f786445f972981c11272d32a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTY3Nw_size_16_color_FFFFFF_t_70 1]: /images/20210813/21cf998aaa664dca8603c2e8ccaa0ba9.png