能共存但不能混用同一份代码路径；webpack打包的bundle.js是自包含封装体，应使用普通script标签引入，而type="module"仅适用于未打包的原生es模块或动态import()加载的异步chunk。
HTML中<script type="module">和webpack打包后bundle.js能共存吗</script>
能，但不能混用同一份代码路径。webpack打包输出的 bundle.js 是一个自包含的 IIFE 或 ES 模块封装体，它不依赖原生 type="module" 的加载机制；而 <script type="module"></script> 加载的是未经打包、带 import 语句的原始 ES 模块文件。二者属于不同层级的模块化方案，强行让 webpack 输出的 bundle 被 type="module" 加载，会导致 import 解析失败或重复执行。
常见错误是：把 webpack 打包后的 bundle.js 写成 <script type="module" src="bundle.js"></script> —— 这不会报错，但模块内如果有 import，浏览器会尝试按原生模块规则解析，而 webpack 已把所有依赖打平，实际找不到对应模块路径，最终抛出 Failed to resolve module specifier。
- 若你用 webpack，就用普通
<script src="bundle.js"></script>，别加type="module" - 若你走原生 ES 模块路线，就不用 webpack 打包 JS（可配 Vite），或只用 webpack 处理 CSS/图片等资源，JS 层保持
import原样 - 两者混合的合理场景：用
type="module"加载主入口（如main.js），再在其中动态import()webpack 打包好的异步 chunk（如import('./chart.chunk.js')），前提是 webpack 配置了output.chunkFilename且导出为 ES 模块格式
html-webpack-plugin怎么处理type="module"脚本
默认不处理，需要显式配置。html-webpack-plugin 在生成 HTML 时，对 script 标签的 type 属性不做推断或改写，它只根据 webpack 的 entry 和 chunks 注入 <script></script> 标签，并默认使用无 type（即 type="text/javascript"）。
如果你的项目既用 webpack 打包，又想让最终 HTML 中的主脚本带 type="module"（例如为了启用顶层 await 或配合 nomodule 降级），必须手动干预：
- 在
HtmlWebpackPlugin配置中用scriptLoading: 'module'（v5.3.0+ 支持） - 或者用
templateParameters+ 自定义 template，在模板里写死<script type="module" src="<%=%20htmlWebpackPlugin.files.chunks.main.entry%20%>"></script> - 注意：开启
scriptLoading: 'module'后，webpack 必须输出 ES 模块格式（output.libraryType = 'module'），否则运行时报Cannot use import statement outside a module
为什么用webpack打包后，HTML里还留着import()动态导入却报错
因为 webpack 默认把 import() 当作代码分割点，生成独立 chunk，但不会自动把这些 chunk 注入 HTML —— 它们只在运行时由 JS 引擎按需请求。如果这些 chunk 文件没被正确部署到服务器对应路径，或路径被 webpack 的 publicPath 配置搞错，就会 404。
典型现象是控制台报 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html"，本质是请求返回了 index.html（通常是 history fallback 导致），而非真正的 chunk 文件。
- 检查
output.publicPath是否配置正确，尤其上线时要设为 CDN 地址或相对路径（如'./'），不能留空或写成'/'（易触发根路径 fallback） - 确认
output.chunkFilename生成的文件名与 network 面板中请求的路径一致（比如是chunk-abc123.js还是js/chunk-abc123.js） - 服务端需确保所有
.js请求都真实命中文件，不要对未知路径一律返回 index.html（开发用devServer.historyApiFallback是方便 SPA，但生产环境得精确配置）
纯静态HTML项目想模块化，又不想跑webpack，有什么轻量替代
用 <template></template> + fetch() + insertAdjacentHTML() 是最直接的落地方式，不依赖构建，兼容 IE11+，且完全可控。
它绕开了“HTML 作为模块”的语义缺失问题：浏览器不支持 <link rel="import">，也没有原生 import './header.html'，但你可以把结构写进 <template id="header"></template>，再用 JS 克隆注入。关键不是“自动”，而是“可复用+不污染”。
- 避免直接操作
innerHTML插入未 sanitised 的 HTML，尤其来自 fetch 的内容；优先用document.importNode(template.content, true)克隆 - 如果 header.html 是外部文件，fetch 时注意：开发阶段必须起本地服务（
npx serve），否则file://协议下跨文件 fetch 会被 CORS 拦截 - 不要在
<template></template>里写内联事件（如onclick="doX()"），JS 行为应统一由模块脚本绑定，否则克隆后事件丢失
真正难的不是怎么加载，而是状态同步和样式隔离——比如 header 加载完，侧边栏菜单是否该高亮当前页？这类逻辑一旦散落在多个 HTML 片段里，很快就会失控。所以轻量方案只适合结构稳定、交互极少的页面。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
