3. Use of css-loader and style-loader

1. What is a loader?

loader can be used to transform the source code of the module;

We can also regard the css file as a module, and we load this module through import;

When loading this module, webpack doesn't actually know how to load it, we must make a corresponding loader to complete this function;

2. Installation of css-loader and style-loader

Method: npm install css-loader -D to install css-loader
Method: npm install style-loader -D to install style-loader

3. Usage scheme of css-loader and style-loader

3.1 Inline mode (not commonly used)

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

Add the loader used before the imported style, and use ! to separate, this method is not commonly used

3.2 CLI mode (cannot be used)

There is no --module-bind in the webpack5 document;
it is rarely used in practical applications because it is inconvenient to manage;

3.3 Configuration method (commonly used)

The configuration mode means that the configuration information is written in our webpack.config.js file

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'
         ]
      }
   ]  
 }
}

Multiple loaders can be configured in module.rules

The configuration of module.rules is as follows: