css-loader在webpack里做什么？

Question

根据官方webapck文档，webpack使用一个名为css-loader的加载器将指定的CSS文件导入到JavaScript模块中。

这个过程有什么好处呢？你怎么能不用老办法，用link标签把CSS文件链接到html上呢？

Answer 1

我会给你一个很好的例子，说明链接css是不可能的。

如果您正在开发一个Core应用程序，并且想要使用node_modules文件夹中的一些ASP.NET，则无法解析该文件夹的路径。这是因为ASP.NET只提供来自wwwroot目录的文件。

正因为如此，你需要一个像webpack一样的构建系统。

在webpack中使用css加载器，它将检查作为条目提供的js/ts文件中的每个css引用，并在输出目录(通常在wwwroot中)中生成另一个css文件。看一下这个例子：

entry: {
vendor: [
    '@angular/animations',
    '@angular/cdk',
    '@angular/material',
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/flex-layout',
    '@angular/forms',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@angular/material/prebuilt-themes/pink-bluegrey.css',
    'es6-shim',
    'es6-promise',
    'event-source-polyfill',
    'jquery',
    'zone.js',
    'jwt-decode'
]}

在这里，我为angular材质添加了一个主题css。请注意，css位于供应商的js/ts包中。css加载器将从中提取css，并生成与包同名的css文件。在wwwroot文件夹中生成的文件将是您将在index.html中引用的文件(假设它是一个SPA应用程序，如本例所示)。

当然，您可以只复制node_modules文件夹中的css文件，并将其放在wwwroot目录中，以便能够链接它。但这种方法是脆弱的，因为当css的另一个版本可用，而您不想要最新的版本时，您将不得不更新包并重新复制文件。那么，为什么不把它自动化呢？