简介

以前我们引入 JS 资源总是通过<script>标签引用。

index.html

index.js

utils.js

<button>计算1+2</button>
<script src="./src/utils.js"></script>
<script src="./src/index.js"></script>

但是这种落后方式引入会有诸多弊端，如：

所以在新版的 JS 中提出了模块化方案，而 chrome 也开始了支持。

index.html

index.js

utils.js

<button>计算1+2</button>
<script type="module" src="./src/index.js"></script>

不过在早些时候浏览器确是基本都不支持模块，也就是说上边代码会报错"import、export 无法被正确识别解析"。

于是 webpack 就出现了，为了就是能让我们尽早使用上优秀的模块化技术，不用考虑兼容问题。经过 webpack 处理后的代码，引入到浏览器，就可以兼容旧浏览器。

graph LR;
    utils.js-.->|import 引入|index.js;
    index.js-->|Webpack处理|生成Output.js;
    生成Output.js-->|script标签引入|index.html;

本章参考

简介#