2021最新webpack5: CSS-Loader 使用

P5 05-CSS-Loader 20:57
更新于: 2022-01-05 15:13:58

为什么需要loader

转换，将一些 webpack 不识别的后缀给识别出来

loader 是什么

是一个模块，用js实现一些具体的逻辑，让webpack 能识别对应的后缀

行内loader

import "css-loader!../css/login.css"

配置文件里的 loader

module.exports = {
  modules: {
    rules: [
      {
        test: '\.css$',  // 正则，匹配将要处理的文件(filename)类型
        use: [
          { loader: 'css-loader' }
        ]
      }
    ]
  }
};

只有一个loader的情况，可以这样简写

module.exports = {
  modules:{
    rules: [
      {
        test: '\.css$',  // 正则，匹配将要处理的文件(filename)类型
      	loader: 'css-loader'
      }
    ]
  }
}

或者这样

有多个 loader，一般都没有参数，或者简单参数

module.exports = {
  modules:{
    rules: [
      {
        test: '\.css$',  // 正则，匹配将要处理的文件(filename)类型
        use: ['css-loader']
      }
    ]
  }
}

css-loader

只是将css 处理成 js识别的后缀

style-loader

将css-loader识别好的东西插入到界面上去

参考