css-loader 在 webpack 中做什么？

Question

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

这个过程有什么好处呢？你怎么能不采用使用 link 标签将 CSS 文件链接到 html 的老式方法呢？

Answer 1

我将为您提供一个无法链接 css 的场景的好例子。

如果您正在开发 ASP.NET Core MVC 应用程序，并且想要使用 node_modules 文件夹中的一些 css，则无法解析该文件夹的路径。发生这种情况是因为 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'
]}

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

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