在Webpack中配置loader加载器以实现正常打包样式文件

一、配置处理css文件的loader

在网页开发中 不推荐在页面中直接引入样式 有可能会产生多次请求问题：

<link rel="stylesheet" href="./css/index.css">

使用了Webpack之后 可在main.js中引入CSS样式表：
就像引入其它模块一样(但语法略有区别)

// 使用import语法导入CSS样式表
import "./css/index.css" 

但 webpack默认处理不了后缀名为.css的样式表文件
因为webpack默认只能打包处理js类型的文件 并不能处理其它非js类型的文件
若要处理非js类型的文件 需要手动安装其各自合适的loader(加载器)

安装步骤：

• 1、在项目根目录输入cnpm i style-loader css-loader -D 安装style-loader和css-loader这两个loader
  

• 2、安装好loader之后 修改webpack.config.js配置文件：
  新增名为module的配置节点 用于配置所有第三方模块加载器(loader)
  在该对象上有个rules属性 该属性是个数组 存放了所有第三方文件的匹配和处理规则
  test属性表示用正则表达式进行匹配 匹配所有以.css结尾的文件
  use属性表示前面匹配到的文件类型用指定的模块加载器(loader)进行处理
  注：在1.x版本的webpack中 loader的后面可不带-loader后缀 但在2.x版本及以上必须带有-loader后缀

const path=require("path")

module.exports={
    entry:path.join(__dirname,"./src/main.js"),
    output:{
        path:path.join(__dirname,"./dist"),
        filename:"bundle.js"
    },
    // 配置所有第三方模块加载器(loader)
    module:{
        // 所有第三方模块的匹配规则
        rules:[
            {test:/\.css$/,use:["style-loader","css-loader"]} // 配置处理.css文件的第三方loader规则
        ]
    }
}

Webpack处理第三方文件类型的过程：

webpack在进行打包的时候 会校验import导入的文件的类型
若为JS文件 则可以直接打包
但 若为其它类型的文件 例如CSS 则会根据其后缀名去webpack.config.js中的module的rules里寻找对应的匹配规则
若能找到 则调用相应的第三方模块(loader)进行打包
若找不到 则报错

loader(加载器)调用顺序：

若设置的匹配规则对应的loader不止一个 那么调用顺序是【从右到左】
例如：{test:/\.css$/,use:["style-loader","css-loader"]}
在这个例子中 会先调用css-loader 然后将处理完毕的结果交给style-loader进行进一步的处理
style-loader处理完毕之后 若前面还有loader 则再交给前面的loader进行处理 以此类推
若前面没有loader了 则交给webpack进行打包 最后合并到最终的JS文件(即bundle.js)中

---

二、配置处理less文件的loader

Less(Leaner Style Sheets)是一门向后兼容的css扩展语言
即css的扩展语言 大部分语法还是很相似的

导入：

// 使用import语法导入less样式表
import "./css/index.less"

下载相应的loader 然后进行配置：

• 1、在项目根目录输入cnpm i less-loader less -D安装less-loader和less这两个loader
  (less-loader内部依赖于less)
  

• 2、修改webpack.config.js
  由于less属于样式 因此必须调用用于处理样式的loader：style-loader和css-loader
  顺序是style-loader","css-loader","less-loader 先使用less-loader将less样式处理为css样式 再由css-loader和style-loader进行处理

const path=require("path")

module.exports={
    entry:path.join(__dirname,"./src/main.js"),
    output:{
        path:path.join(__dirname,"./dist"),
        filename:"bundle.js"
    },
    // 配置所有第三方模块加载器(loader)
    module:{
        // 所有第三方模块的匹配规则
        rules:[
            {test:/\.css$/,use:["style-loader","css-loader"]}, // 配置处理.css文件的第三方loader规则
            // 由于less属于样式 因此必须使用style-loader和css-loader
            {test:/\.less$/,use:["style-loader","css-loader","less-loader"]} // 配置处理.less文件的第三方loader规则
        ]
    }
}

---

三、配置处理scss文件的loader

Sass是一款强化CSS的辅助工具，它在CSS语法的基础上增加了变量(variables)、嵌套(nested rules)、混合(mixins)、导入(inline imports)等高级功能，这些拓展令CSS更加强大与优雅。

简单来说 也是css的扩展

导入：

// 使用import语法导入scss样式表
import "./css/index.scss"

同样 下载相应的loader 然后进行配置：

• 1、在项目根目录输入cnpm i sass-loader node-sass -D 安装sass-loader和node-sass这两个loader
  (sass-loader内部依赖于node-sass)
  

• 2、修改webpack.config.js
  由于less属于样式 因此必须调用用于处理样式的loader：style-loader和css-loader
  顺序是style-loader",“css-loader”,"less-loader 因为要先使用less-loader将less样式处理为css样式 再由css-loader和style-loader进行处理

const path=require("path")

module.exports={
    entry:path.join(__dirname,"./src/main.js"),
    output:{
        path:path.join(__dirname,"./dist"),
        filename:"bundle.js"
    },
    // 配置所有第三方模块加载器(loader)
    module:{
        // 所有第三方模块的匹配规则
        rules:[
            {test:/\.css$/,use:["style-loader","css-loader"]}, // 配置处理.css文件的第三方loader规则
            // 由于less属于样式 因此必须调用style-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规则
        ]
    }
}

总结：

简单来说 配置loader就两步
首先 下载对应的loader 然后在webpack的配置文件中配置匹配规则即可

---