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，cssFile3的内容会出现在file1.css和file2.css中吗？或者 sass-loader 会解决这个问题并且只包含 cssFile3 一次？

Answer 1

官方文档说：

重复数据删除

如果您使用一些具有很酷的依赖关系树的库，则可能会出现某些文件相同的情况。Webpack 可以找到这些文件并对它们进行重复数据删除。这可以防止将重复代码包含到您的包中，而是在运行时应用该函数的副本。

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

不过我还没有尝试过。