webpack4.x Loaders

在main.js中直接加require(‘./css/base.css’)，然后打包会报错，是因为webpack不支持css文件类型，需要依赖loader。

• css-loader 处理css中路径引用等问题
• style-loader 动态把样式写入css
• sass-loader scss编译器
• less-loader less编译器
• postcss-loader scss再处理

一、安装css-loader,style-loader

npm install css-loader style-loader --save-dev

二、使用loader

1.在引入css文件中

require(‘style-loader!css-loader!./css/base.css’);//从右到左执行，必须注意顺序

2.在命令行

//给css绑定
webpack --mode production --module-bind "css=style-loader!css-loader"

注：必须是双引号，单引号会报错。–module-bind是为loader绑定一个扩展

3.在配置webpack

在文件webpack.config.js中配置

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

总结loader的7种用法：

use:['style-loader','css-loader']
use:[{loader:'style-loader'},{loader:'css-loader'}]
loader:['style-loader','css-loader']
loader: 'style-loader!css-loader'
loaders:['style-loader','css-loader'],
loaders:[{loader:'style-loader'},{loader:'css-loader'}],
loaders: 'style-loader!css-loader',

webpack 根据正则表达式，来确定应该查找哪些文件，并将其提供给指定的 loader。在这种情况下，所有以 .css 结尾的文件，都将被提供给 style-loader 和 css-loader。

Rule.loaders 是 Rule.use 的别名。由于需要支持 Rule.use，此选项已废弃。