区别：Webpack 的 css-loader 和 raw-loader

Question

根据这个问题，css-loader将文件作为字符串进行加载，并根据require解析webpack依赖项，style-loader则插入样式标签到页面中。在许多情况下，raw-loader可以替代css-loader。

我目前正在使用：

loader: ExtractTextPlugin.extract("raw-loader!postcss-loader!sass-loader?sourceMap&" + sassIncludePaths.join(""))

在.scss文件中存在require，但我还没有看到使用raw-loader的问题。所以问题是：

1. 两者之间的确切区别是什么？
2. 如果我用raw-loader代替css-loader以减少运行时间，可能会有什么问题？

- Lucia

Answer 1

根据我的理解： raw-loader 和 css-loader 的主要区别在于前者会原样加载文件，而后者会筛选 webpack 的 require。因此，通常使用 css-loader 的情况是与 style-loader 结合使用，后者将一个 style 标签插入页面中，以便页面仅包含所使用的样式。

然而，在我们的情况下，我们无论如何都将它们提取到一个单独的文件中，因此我们可以使用 raw-loader 代替，这样可以节省近一半的时间。

此外，sass-loader 也会解析 @import，这是我们唯一使用的依赖项，因此设置应该是正确的。

- Lucia