我们来讲下webpack第3个比较核心的观念loader。Loader，意为载入程序，装货。loder就是模块解析处理器。
说到webpack加载文件，就不得不顺便提一句，common.js规范中，认为每一个单独的文件都是一个模块。怎么说呢？就好比你一个main.css是一个模块，你具体的某个页面样式比如index.css也是一个模块。除了css以外，js文件也是一个模块，除此之外，ts也可以视作一个模块。
总结一句话就是，common.js认为每一个文件就是一个单独的模块。而每一个模块都有单独的作用域，在单独的作用域内，这个模块内定义的变量，不能被这个作用域以外的作用语所访问或读取。除非定义为全局对象的属性。
这个时候怎么办呢，我要怎么拿到这些单独模块聚合一起，然后再打包呢，就会有以下几个方式
早期的Common.js,adm,cdm的导入导出模块和es新增的导入导出模块功能。
更多关于导入导出模块详情点击这里.
我们回到正题，说道载入模块处理器loader。我们通过common.js导入进来任何文件以后是不是就可以直接解析和处理了呢。非也，非也。
我们的文件只导入进来没用，因为webpack呢，他只认识js，其他文件类型他不认识的啊。那么就要想法解析这些webpack不认识的文件，解析出webpack能理解的份上才行是吧。
这个时候就要用到loader模块处理器了。比如，css-loader就是把样式文件加载进来以后对其进行解析处理，我们叫做预处理文件。处理成可以直接引用的模块。
那怎么才能解析这些文件呢，现在我们用导入和解析css样式举例：
1，首先你要先安装进解析这些css的loader。常用的语句是：
npm install --save-dev css-loader
2，那安装完以后就可以了，不用管了是吧？打个比方，从网上买了折叠衣柜，他寄过来是散列开来的工具，这个时候你是不是买回来了以后要进行配置？把这些工具重新还原成该有的样子，才可以使用？同理，安装了css-loader以后呢，你要进行相应的配置才行，这样你安装回来的东西才不至于放在那里无法使用啊。
3，配置loader。
配置了相应规则，就可以自动化处理一切。无论如何这里有3种方式进行配置loader。
通过webpack.config.js文件配置。
通过内联。（import语句中显示指出loader）
通过CLI（在shell命令中指定他们）
然而呢，我在这里只介绍一个最常用最万金油的一个方式：通过webpack.config.js文件配置。
我们先上代码看看最常见的配置格式：
module.exports={
"entry":'./src/a.js',
output:{//output
'path':path.resolve(__dirname,'dist'),//这个必须为绝对路径，但是最好用动态，因为有可能我们的文件路径会进行改动。所以这个时候可以用到node提供的path依赖
filename:'bundle.js'
},
module:{
rules:[
{
test: /\.(css|less)$/, //注意这里css,less
use: [
{ loader: "style-loader" },//高级版本必须这样写
{ loader: "css-loader" },
{ loader: "less-loader" }
],
type:"javascript/auto"
},
]
}
}
在webpack解析模块的同时，不同类型的模块需要使用不同类型的loader载入程序来处理不同模块，这部分的设置就在 module 配置中。所以Loader配置呢是其实包含在module配置中的。
那么module配置主要有俩个方面：module.noParse 和 module.rules。
我们这里值赘述module.rules跟loader配置相关的。可以将符合规则条件的文件模块交给对应的模块loader模块处理器来处理。
Module.rules是一个数组，数组里面的每一项都是一个对象类型。都在告诉怎么处理相对应的引进来的文件应用哪个loader模块处理器。
我们再次只介绍这个对象里面3个属性：test，use，type。
首先是test条件匹配：
利用正则表达式规则来条件匹配模块文件。，就是指出，符合这个test规则条件的文件，统统拿去给这个项里面对应的loader处理。
接下来是use指定使用哪些loader：
use呢是一个数组，每个数组元素可以是这个loader对应的字符串名称，也可以是一个对象用来映射loader处理器。不过在高版本的webpack配置中，字符串形式的已经被淘汰。目前只能用对象形式了。
最后一个是type：
webpack 5之后，就内置了资源模块（assets），意思是 webpack 可以自己处理静态资源文件。而在 webpack 5 之前都是需要安装 url-loader 、file-loader 去处理项目中的静态资源文件。若是 webpack 5安装使用了 url-loader，需要在 test 下增加一行 type: ‘javascript/auto’
好的，我们至此把loader核心大致讲完。具体不同模块部分关于webpack的loader使用，我们后面慢慢补充。
