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引用，并将在输出目录中生成另一个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并生成一个与bundle名称相同的css文件。放置在wwwroot文件夹中的生成文件将是您将在index.html中引用的文件（假设它是一个SPA应用程序，如本例所示）。

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

css-loader在webpack中做了什么？

1 个答案: