webpack 可以在不复制所需文件的情况下捆绑 css/scss/less 吗？

Question

假设我有以下 2 个组件，直接需要相同的实用程序 css 文件。

组件一：

import component1Css from '/path/to/component1.scss'
import someOtherUtilityCss from './path/to/some-other-css.scss'
...
export default Component1;

组件二：

import component2Css from './path/to/component2.scss'
import someOtherUtilityCss from './path/to/some-other-css.scss'
...
export default Component2;

然后我将它们包含在我的应用中：

主应用：

import someLayoutCss from './path/to/some-layout.css';
import Component1 from './path/to/component1'
import Component2 from './path/to/component2'

...

export default App;

我希望捆绑系统知道只导入一次some-other-css.scss。

style-loader + css-loader 是否已经开箱即用？

此外，

如何处理内部 css 导入？

如果我通过 import 语句在 javascript 中导入了 cssFile1 和 cssFile2：

import cssFile1 from 'path/to/file1.scss'
import cssFile2 from 'path/to/file2.scss'

而且cssFile1和cssFile2都在内部导入cssFile3，那么在file1.css和file2.css中cssFile3的内容会出现重复吗？或者 sass-loader 会解决这个问题并只包含一次 cssFile3 吗？

Answer 1

我认为 sass-loader 会删除重复项。
如果 css 不在项目中，它将重复。
你可以使用 webpack config resolveLoader 来删除重复项。

Answer 2

官方文档说：

重复数据删除

如果你使用一些带有很酷的依赖树的库，它可能会发生 有些文件是相同的。 Webpack 可以找到这些文件并 对它们进行重复数据删除。这可以防止将重复代码包含在 你的包，而是在运行时应用函数的副本。

https://webpack.github.io/docs/optimization.html#deduplication

我还没试过。