webpack - css-loader 在 webpack 中做了什么？

Question

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

这个过程有什么好处？你怎么能不使用使用链接标签将 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'
]}

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

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