html-webpack-plugin需显式配置chunks并禁用重复注入：设inject='body'、避免手动写script、多页时每个实例指定chunks:['home']，禁用html-loader处理type="module"片段。
html-webpack-plugin 怎么配才不注入重复 script 标签
Webpack 本身不处理 HTML 结构，html-webpack-plugin 是唯一能可靠把打包资源注入 HTML 的工具。但默认配置下，它可能把同一个 chunk 注入多次，尤其当你混用 type="module" 和普通脚本时。
常见错误现象：Uncaught SyntaxError: Cannot use import statement outside a module 或控制台看到两份 main.js 被加载。
- 确保
inject: true（或显式设为'body'），避免手动写<script>标签后插件又加一份 - 若用了
scriptLoading: 'module'，必须同步设output.libraryType = 'module'，否则 webpack 输出的 IIFE 格式会和浏览器原生模块加载器冲突 - 多页应用中，每个
HtmlWebpackPlugin实例必须明确指定chunks，比如chunks: ['home']，否则默认注入全部 entry，造成冗余 - 禁用
html-loader处理含type="module"的片段——它会把import当字符串，导致运行时报ReferenceError: require is not defined
HTML 模块化结构怎么拆才不破坏语义和渲染流
模块化不是套个 <div class="module"> 就完事。拆分后若脱离文档流或丢失语义，首屏渲染就可能卡顿、屏幕阅读器无法识别、:focus-within 失效。
关键判断点：浏览器是否还能按自然顺序解析、布局、聚焦。
立即学习“前端免费学习笔记（深入）”；
- 优先用
<header>、<nav>、<main>、<section>等语义标签做天然模块边界，别用<div>包裹后再加 role - 禁止在模块根节点上设
position: absolute或float——这会让它脱离文档流，后续模块的上下文错乱 - 避免用
display: contents或visibility: hidden包裹模块，前者删 DOM 节点导致语义丢失，后者让 focus 顺序跳过该区域 - 动态插入模块（如懒加载）时，用
insertAdjacentHTML('beforeend', html)替代innerHTML，否则已绑定的事件监听器全丢
Vite 中按需打包 HTML 入口怎么配才不出路径错
Vite 不像 Webpack 那样靠插件“注入”，而是通过 build.rollupOptions.input 显式声明多个 HTML 入口。路径错不是语法问题，而是构建时解析失败导致生成空文件或 404。
典型报错：Error: Could not resolve entry file 或 dist 目录里 HTML 里 script src 是 /src/main.js 这种开发路径。
-
input必须是相对于vite.config.ts的绝对路径，推荐写法：input: { home: './src/pages/home/index.html', dashboard: './src/pages/dashboard/index.html' } - 每个 HTML 入口里引用的 JS/CSS 路径必须是相对路径（如
./index.ts），不能是src/index.ts或绝对路径 - 禁用
html-plugin类第三方插件——Vite 原生支持多 HTML 入口，加插件反而干扰路径解析 - 若用
import('./module.html')，这是非法操作：HTML 不是 JS 模块，Vite 不支持，会直接报Cannot find module
组件内联资源重复导致体积暴涨怎么压
HTML 组件化项目没有依赖分析能力，所谓“打包组件”本质是人为组织资源。体积暴增 90% 来自重复内联，压缩 HTML 只是贴创可贴。
一个 <my-card> 写 5 次，如果每次带 2KB <style> + 1KB 初始化脚本，光这部分就多出 15KB，压缩后还是 15KB。
- 所有公共样式必须外链：
<link rel="stylesheet" href="/shared.css">，禁止每个组件里写<style> - 组件逻辑统一由单个
<script type="module">加载，用import拆分，而非每个组件都塞customElements.define() - SVG 图标禁用 base64，改用
<svg>外链或系统字体；<template id="xxx">必须全局唯一，JS 运行时只克隆一次 -
html-minifier-terser的collapseWhitespace: true会删掉文本节点间空格，若组件依赖childNodes[0].textContent取值，就可能取到空字符串
