以前我们都提倡把css通过外部引入，但现在使用webpack时往往会和html打包在一起？这是为什么呢？

你说的现象是存在的，并且背后有很多原因共同促成了这种转变。以前提倡外部引入 CSS 主要为了缓存和页面加载速度，但现代前端开发流程，特别是使用 webpack 等构建工具后，情况发生了变化：

• 缓存策略的改变: 虽然外部 CSS 文件仍然可以被缓存，但 webpack 等工具可以对打包后的 CSS 文件进行哈希命名（例如 style.a1b2c3d4.css）。这意味着当 CSS 内容发生变化时，文件名也会改变，浏览器会自动下载新的 CSS 文件，而旧的缓存文件会失效。这有效解决了缓存导致更新不及时的问题，同时也保留了缓存的优势。

• 代码分割和按需加载: webpack 支持代码分割，可以将 JavaScript 和 CSS 代码分割成多个小块，并根据需要进行加载。这可以显著提高初始页面加载速度，因为浏览器只需要下载当前页面所需的资源。如果 CSS 是外部文件，则需要额外的 HTTP 请求来获取，而打包在一起可以减少请求次数。

• 开发效率和维护性: 将 CSS 打包到 JavaScript 中可以简化开发流程，例如可以使用 CSS Modules 或 CSS-in-JS 等技术来更好地管理样式，避免全局样式冲突。同时，这也方便了代码的维护和版本管理。

• HTTP/2 和 HTTP/3 的普及: HTTP/2 和 HTTP/3 支持多路复用，可以同时在一个 TCP 连接上传输多个文件。这使得多个小文件的请求开销不再像以前那么显著，因此将 CSS 和 JavaScript 打包在一起带来的性能提升更加明显。

• 优化首屏渲染: 将关键 CSS 内联到 HTML 中，可以减少浏览器渲染页面的阻塞时间，从而加快首屏渲染速度。Webpack 可以帮助开发者提取关键 CSS 并将其内联到 HTML 中。

• 减少请求数量: 将 CSS 和 JavaScript 打包在一起可以减少浏览器需要发出的 HTTP 请求数量，尤其是在移动端网络环境下，减少请求数量可以显著提升页面加载速度。

总的来说，虽然外部引入 CSS 仍然是一个可行的方案，但在现代前端开发中，使用 webpack 等构建工具将 CSS 和 HTML 打包在一起通常是更优的选择，因为它可以带来更好的性能、开发效率和维护性。当然，具体情况需要具体分析，如果你的项目非常简单，并且没有使用构建工具，那么外部引入 CSS 仍然是一个不错的选择。