webpack 将 CSS 作为字符串内联到 JS 捆绑包中

webpack inlines the CSS as a string inside the JS bundle

本文关键字：JS 包中 CSS 字符串 webpack      更新时间：2023-09-26

我一直在阅读有关 webpack 的信息，我终于明白了 webpack 的基本功能。我也需要 webpack 的许多高级功能。所以我正在尝试尽可能多地学习 webpack 功能。

所以，我正在阅读另一个很好的webpack资源。但是当我提供这个页面的github维基链接时，它说了一些我没有得到的东西。

当你需要CSS（

或更少等）时，webpack将CSS作为字符串内联到JS包中，require（）会在页面中插入一个标签。当你需要图像时，webpack 会将图像的 URL 内联到捆绑包中，并从 require（） 返回它。

源的链接是网络包-操作方法 |样式表和图像

我希望有人能帮我解决这部分问题。

假设您对内容有myStyle.css：

.something { color: red; }

当您（在.js文件中）执行以下操作时：

require('./myStyle.css');

然后 Webpack 将读取该样式文档并将其输出到 HTML 文档中的 <style> 标记中，例如 

<html>
<body>
    <style>
        .something { color: red; }
    </style>
</body>
</html>

图像也是如此。如果你在你的js中这样做：

const imageUrl = require('/path/to/your/image');

然后 Webpack 将确保该映像被复制到您的 build/dist 文件夹中，并为其指定一个唯一的名称（例如 15be437...）。并且您的 imageUrl 变量将设置为该唯一名称。

所有这些都是可配置的。您可以将 Webpack 输出设置为常规.css文件，而不是内联它。您可以将图像制作成 Base64 图像等。

相关文章：