捆绑反应应用程序时webpack如何处理导入语句？

Question

我的问题不太主观。

所以场景就像-我有 n 个反应组件。每个 组件有其各自的 css 文件。里面有几个常见的css文件 assets/css/ 文件。如果需要，我只是将通用 css 文件导入到我的 react 组件 css 文件中。

例如：- 有一个assets/css/color.css 文件，它很常见并且被少数组件使用。我正在将 assets/css/color.css 导入到那些需要它的 css 文件中。这样我将assets/css/color.css 多次导入到不同的css文件中。

我的问题是- 当 webpack 开始捆绑代码时，它如何处理同一个 css 文件的多次导入？多处导入相同的css文件会不会导致bundle文件冗余？

Answer 1

How does webpack handle multiple files importing the same module React 给出的答案暗示 webpack 只会捆绑每个库一次。

对于 JS 模块也是如此。每个模块只嵌入一次，webpack 在适当的地方重用实例。

但是，如果您在该文件中包含另一个文件，则取决于 css webpack 模块如何管理它。

对于原始 CSS，我认为文件只会被包含一次，因为所有内容都由 webpack 直接管理。

但是，如果您使用 sass 加载器并从您的第一个 sass 文件中导入其他一些 sass 文件，如下所示：

1.js 文件 -> 包含一个.sass 文件 -> @import another.sass 文件 2.js文件->包含b.sass文件->@import another.sass文件

然后，如果另一个.sass 文件生成一些类定义，您会看到这些类在输出中出现多次。这是因为 webpack 不知道重复，因为它是在 sass 加载器级别处理的。