三、css-loader以及style-loader的使用

1、什么是loader？

loader 可以用于对模块的源代码进行转换；

我们可以将css文件也看成是一个模块，我们是通过import来加载这个模块的；

在加载这个模块时，webpack其实并不知道如何对其进行加载，我们必须制定对应的loader来完成这个功能；

2、css-loader和style-loader的安装

方法：npm install css-loader -D 安装css-loader
方法：npm install style-loader -D 安装style-loader

3、css-loader和style-loader的使用方案

3.1 内联方式（不常用）

方法：import "css-loader!../css/style.css"

在导入的样式前加上使用的loader，并且使用 !分隔,此方法不常用

3.2 CLI方式（不能用）

在webpack5的文档中已经没有了–module-bind；
实际应用中也比较少使用，因为不方便管理；

3.3 配置方式（常用）

配置方式表示的意思是在我们的webpack.config.js文件中写明配置信息

const path = require('path');
module.exports = {
    
    
  entry: "./src/main.js",//入口文件
  output: {
    
    //出口文件
    path: path.resolve(__dirname, "build"),
    filename:"bundle.js"
  },
  module: {
    
    
    rules: [
      {
    
    
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
    
    
       test: /\.less$/,
         use: [
          'style-loader',
          'css-loader',
          'less-loader'
         ]
      }
   ]  
 }
}

module.rules中可以配置多个loader

module.rules的配置如下：