webpack-模块化兼容性

墨蓝 2021-08-27 00:58 394阅读 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

发表评论取消回复

表情：

评论列表（有 0 条评论，394人围观）

还没有评论，来说两句吧...

相关阅读

相关模块化、Webpack 快速上手

一、模块化的使用 1. 概念前端中js文件与js文件的相互调用称为模块化 2. ES5实现模块化 (1) 创建01.js文件(被调用) //1.

水深无声/ 2023年01月10日 14:58/ 0 赞/ 123 阅读

相关 webpack 之js兼容性处理

webpack 之js兼容性处理 // 用来拼接绝对路径的方法 const { resolve} = require('path')

快来打我*/ 2023年01月10日 10:25/ 0 赞/ 145 阅读

相关 webpack的生产模式兼容性处理

webpack的生产模式兼容性处理注意不要有中文路径并且文件扩展名必须显示出来不然会有小问题初始化 > npm init --yes > 初

清疚/ 2022年12月12日 12:26/ 0 赞/ 180 阅读

相关前端模块化与Webpack

前端模块化是js与js之间的调用如何模块化 1 es5代码之间的模块化 01.js负责创建方法 //1创建js方法 const

青旅半醒/ 2022年11月21日 09:56/ 0 赞/ 207 阅读

相关 webpack图解指南（模块化部分）

在前面一篇文章中[《模块化系列》彻底理清 AMD,CommonJS,CDM,UMD,ES6][AMD_CommonJS_CDM_UMD_ES6] 我们可以学到了各种模块化的机制

冷不防/ 2022年10月31日 01:52/ 0 赞/ 201 阅读

相关如何让webpack模块化代码兼容到ie8

需求：网站的所有页面都要跑一个脚本，由于这个脚本的功能有很多，所以考虑使用webpack将其中的每个功能模块化。使用webpack，就自然想到用es6爽一爽吧。为了兼容尽可能多

红太狼/ 2022年09月28日 11:39/ 0 赞/ 214 阅读

相关 WebPack模块化开发

<span style="font-family:Microsoft YaHei; font-size:18px">p.js</span> module.ex

傷城~/ 2022年07月16日 07:47/ 0 赞/ 276 阅读

相关兼容性

1. 　　清除浮动的兼容性　　清除浮动在低版本浏览器不行，需要处理兼容性　　加一个.clearfix\{\zoom:1;\} 2. 　　ie低版本不支持Rgba（） 3.

亦凉/ 2021年12月22日 01:29/ 0 赞/ 467 阅读

相关 webpack-模块化兼容性

模块化兼容性由于webpack同时支持CommonJS和ES6 module，因此需要理解它们互操作时webpack是如何处理的同模块化标准如果导出和导入使

墨蓝/ 2021年08月27日 00:58/ 0 赞/ 395 阅读

相关 webpack配置css模块化

大纲模块化css文件安装如下包编写配置文件 index.html 编写index.css

待我称王封你为后i/ 2021年07月24日 18:47/ 0 赞/ 513 阅读