webpack与SPA实践之管理CSS等资源的方法(2)

日期：2020-05-11 栏目：程序人生浏览：次

  {
    test: /\.css$/,
    exclude: /node_modules/,
    loader: 'style-loader!css-loader'
    // or 
    // loaders: ['style-loader', 'css-loader']
  }

WEBPACK加载器解析顺序

如上面代码所示，无论是字符串语法style-loader!css-loader，亦或是数组语法['style-loader', 'css-loader'] ，webpack解析规则都是从右至左，依次解析并执行加载器处理文件，前一加载器处理的输出就是下一加载器处理的输入，直到最后加载器处理完成；此处即webpack先调用css-loader加载器处理css文件，然后将处理结果传递给style-loader加载器，style-loader接受该输入继续处理。

CSS-LOADER

我们已经反复强调，webpack只能处理JavaScript，所以对于其他诸如css或图片等资源需要使用加载器将其转换输出为JavaScript模块，webpack才能继续处理。

css-loader加载器的作用就是支持我们像使用JavaScript模块一样在JavaScript文件中引用CSS文件，如require ('./index.css')，所以你可以认为其作用是将CSS文件转换成JavaScript模块，于是我们可以直接通过引入JavaScript模块的方式直接引用。

参数

css-loader有两个常用参数：

modules: {boolean}指定是否使用CSS模块(如:local和:global设置局部或全局样式规则)，默认是false，开启设置如css-loader?modules;
importLoaders: {number}指定css-loader加载器之前使用的加载器数量，默认是0，设置如css-loader?importLoaders=1；

STYLE-LOADER

无论webpack怎么处理CSS文件，最终都需要将其输出到页面，才能实际使用该CSS规则，style-loader加载器就是将CSS以内联方式插入到页面文档，即：针对每一个输入（通过require引入，使用css-loader转换为JavaScript模块，传递给style-loader作为输入），style-loader在页面<head>标签内插入一个<style>标签，该标签内样式规则即此输入内容，如下实例：

外链样式

当然，我们并不总是希望所有样式都以内联方式存在页面中，很多时候我们也希望通过外链方式使用样式表，特别是样式规则较多的时候，webpack开发者们当然考虑了这样的需求。

webpack提供的style-loader加载器默认是以内联方式将样式插入文档，我们需要使用webpack extract-text-webpack-plugin插件以实现输出单独CSS文件。

EXTRACT TEXT PLUGIN

安装

首先安装该插件：

npm install --save-dev extract-text-webpack-plugin

webpack与SPA实践之管理CSS等资源的方法(2)

相关推荐