Webpack css加载器在网页包中做什么？

根据官方webapck文档，webpack使用名为cssloader的加载程序将指定的CSS文件导入JavaScript模块

---

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

我将给你一个很好的例子，说明不可能链接CSS的情况

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

因此，您需要一个像webpack一样的构建系统

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

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的另一个版本可用时，而您不需要最新的版本时，您将不得不更新包并重新复制文件。那么，为什么不将其自动化呢？

建议阅读：