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

【问题标题】：What does css-loader do in webpack?css-loader 在 webpack 中做了什么？
【发布时间】：2017-12-12 09:52:18
【问题描述】：

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

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

【问题讨论】：

推荐阅读：blog.andrewray.me/webpack-when-to-use-and-why

标签： webpack css-loader

【解决方案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'
]}

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

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

【讨论】：