在 Webpack + VueJs 中链接样式表和要求它们有什么区别？

使用 VueJs 和 Webpack 组合，我发现要包含外部样式表（例如 bootstrap），您可以执行以下两种操作之一：

在你的主 js 脚本中，你可能需要这样的样式表：

require('./assets/lib/bootstrap.min.css');

或者您可以简单地将其移动到通过 Express 访问的静态文件夹并将其链接到您的主 html 文件中：

<link rel="stylesheet" type="text/css" href="/static/css/lib/bootstrap.min.css">

这两种方法有什么区别？我不太明白使用 require 相对于链接的优势（除非我猜它在每个组件本地工作？）。使用其中一种比另一种有什么优势吗？

Require方法：

• 由 webpack 捆绑
• 某些库可能无法捆绑开箱即用，并且可能需要额外的配置
• 你可以使用各种技巧，例如将所有 CSS 提取到一个文件中
• 另外，您可以决定不将它们拆分为单独的文件，您可以将所有 CSS 和 JS 放在 1 个文件中（非常方便的开发设置）
• webpack 可以将图像内联到 CSS 中，然后再内联到 JS 中
• CSS 的热重载应该适用于这种方法（对库没有用）
• 像 libs 这样的大 CSS 使 webpack 开发服务器运行缓慢，因为它每次都必须重建它们

Link方法：

• 没有被 webpack 触及
• 可以从外部 CDN 提供服务，前提是您不需要从您的服务器提供服务
• 不灵活
• 它就是有效的

Webpack 方法为您提供了更多的灵活性和可能性 - 这对您的代码非常有好处。我认为我的经验法则是，如果不需要的话，不要捆绑库，除非有原因，因为你需要付出构建时间和有时额外的配置。