Webpack配置-----loader配置|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第21天

什么是loader?

在实际开发过程中，webpack默认只能打包处理以.js后缀名结尾的模块，其他非.js后缀名结尾的模块，webpack就不能处理了，需要调用loader加载器才可以正常打包，否则会报错！所以loader就是协助webpack打包处理指定文件模块的加载器。

常见的loader包括css-loader、lessloader、bableloader、urlloader等，以下介绍三种常见loader的安装包配置。

css-loader

1. 打开终端，输入npm i style-loader css-loader -D即可进行安装。
2. 打开webpack.config.js,在module->rule数组中，添加loader规则如下：

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

上述代码中/\.css$/的含义是以 .css结尾的文件，证据代码的含义是以.css结尾的文件，都交给style-loader和css-loader处理。

多个loader的调用顺序是从后往前调用，也就是先调用css-loader，再调用style-loader。

less-loader

1. 打开终端，输入npm i less-loader less -D进行安装
2. 打开webpack.config.js,在module->rule数组中，添加loader规则如下：

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

url-loader

当我们需要按路径引入项目目，或者引入以.png、.jpg结尾的文件时,也需要进行处理。

1. 打开终端，输入npm i url-loader file-loader -D进行安装
2. 打开webpack.config.js,在module->rule数组中，添加loader规则如下：

    module:{
        rules:[
            {test:/\.jpg|png|gif$/,use'url-loader?limit=2229'}
        ]
    }

其中?之后的是loader的参数项，只有<=limit大小的图片，才会被转换。

bable-loader

webpack只能打包处理一部分高级高级的JavaScript语法，如果部分语法webpack无法处理，则需要交给bable-loader处理。

1. 打开终端，输入npm i bable-loader bablecore bable/plugin-proposal-decoretors -D进行安装
2. 打开webpack.config.js,在module->rule数组中，添加loader规则如下

      module:{
        rules:[
            {test:/\.js/,use'bable-loader',exclude:/node-modules/}
        ]
    }

exclude的含义是排除node-modules中的文件处理，因为只需要考虑自己文件的兼容性，对于外部引入的，不需要，处理可能会花大量的时间。