loader-配置处理css、less、scss文件处理

使用webpack打包css文件

import './css/index.css'

直接运行会报错，需要配置loader

运行cnpm i style-loader css-loader --save-dev
修改webpack.config.js这个配置文件：

module: { // 用来配置第三方loader模块的
        rules: [ // 文件的匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }
            //处理css文件的规则
        ]
    }

在这里插入图片描述

注意：use表示使用哪些模块来处理test所匹配到的文件；use中相关loader模块的调用顺序是从后向前调用的,先电筒

使用webpack打包less文件

运行cnpm i less-loader less -D
修改webpack.config.js这个配置文件：

{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

在这里插入图片描述

使用webpack打包sass文件

运行cnpm i sass-loader node-sass --save-dev
在webpack.config.js中添加处理sass文件的loader模块：

{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }

最终代码

  module: {
    
     // 这个节点，用于配置 所有 第三方模块 加载器 
    rules: [ // 所有第三方模块的 匹配规则
      {
    
     test: /\.css$/, use: ['style-loader', 'css-loader'] }, 
      //  配置处理 .css 文件的第三方loader 规则
      {
    
     test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, 
      //配置处理 .less 文件的第三方 loader 规则
      {
    
     test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, 
      // 配置处理 .scss 文件的 第三方 loader 规则
    ]
  }
}

总结
注意：webpack，默认只能打包处理Js类型的文件，无法处理其它的非js类型的文件；
如果要处理非s类型的文件，我们需要手动安装一些合适第三方1oader加载器；

1.如果想要打包处理css文件，需要安装 cnpm i style-loader css-loader-D,其他文件也一样。

2.打开webpack.config.js这个配置文件，在里面，新增一个配置节点，叫做module，它是一个对象；在这个module对象身上，有个rules属性，这个rules属性是个数组；这个数组中，存放了，所有第三方文件的匹配和处理规则；

注意：webpack 处理第三方文件类型的过程：

1.发现这个要处理的文件不是J5文件，然后就去置文件中，查找有没有对应的第三方1oader 规则。

2.如果能找到对应的规则，就会调用对应的loader处理这种文件类型；

3、在调用loader的时候，是从后往前调用的；

4.当最后的一个loader调用完毕，会把处理的结果，直接交给webpack进行打包合并，最终输出bundle.je中去