在现代前端开发中，使用 webpack 打包工具来处理 JavaScript、CSS、图片等资源已经成为了标准流程。而在实际项目中，我们常常需要将打包后的代码引入到 HTML 页面中，以便浏览器能够正确加载和解析这些资源。
本文将介绍如何从外部引用 webpack 打包生成的代码，并探讨一些与此相关的概念和技术。
在 HTML 中引入打包后的 JS 文件
假设我们已经通过 webpack 打包好了一个名为 bundle.js 的 JavaScript 文件，并希望将其引入到 HTML 页面中。我们可以使用以下方式来实现：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ---------------
-------
------
------- ----------------------------------
-------
-------其中，/path/to/bundle.js 是我们打包后的文件路径，根据实际情况进行修改即可。
需要注意的是，一般情况下我们会将 JS 文件放在页面底部，以便先加载页面内容，再加载 JS 文件，提高页面加载速度和用户体验。
异步加载脚本
如果我们的 JS 文件很大，或者我们只需要在某些特定场景下才加载它，那么就可以考虑使用异步加载。在 HTML5 中，我们可以使用 async 和 defer 属性来异步加载脚本。
async：表示该脚本可以异步加载，也就是不会阻塞页面渲染。当脚本下载完成后，立即执行。多个被标记为 async 的脚本的执行顺序是不确定的。defer：表示该脚本可以延迟执行，在文档解析完成后再执行。多个被标记为 defer 的脚本会按照它们在文档中出现的顺序依次执行。
以下是示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ---------------
-------
------
------- ------------------------ ---------------
------- -------------------------------- ---------------
-------
-------需要注意的是，虽然异步加载可以提高页面性能，但也有一些潜在的问题，比如可能会导致 JavaScript 代码的执行顺序变得混乱，从而影响功能的正确性。因此，在实际项目中需要根据具体情况进行权衡和选择。
结语
通过本文的介绍，我们了解了如何在 HTML 中引入 webpack 打包生成的 JS 文件，并学习了异步加载脚本的相关知识。希望本文能够对读者有所帮助，同时也提醒大家，在实际项目中需要根据具体情况进行选择和优化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13333