一：为什么要使用loader
由于webpack是一个打包工具，即webpack会将一切文件视为模块，但是webpack在打包的时候只是认识JS文件或者JSON文件，并不认知CSS文件，png图片等，如果想让webpack能够在打包的时候识别其他文件，就必须要使用loader，即loader的作用就是让webpack拥有可以加载和了解除JS文件以外的其他文件。
二：采取loader打包的注意点
首先我们在一个index.js的入口文件中创建如下函数，并且引入另一个CSS文件
import './index.css'
function add(a,b){
console.log('我执行了A+B的算法');
console.log(a+b);
}
function showName(name){
console.log('我的名字是'+name);
}
add(5,10)在CSS文件中我们只是创建了如下的样式，文件的目录结构大致如下。
body{
background: red;
}
然后我们在根目录中创建一个webpack.config.js的文件作为webpack的配置文件，其中进行了简单的配置。然后我们若没有使用loader，则使用npx webpack后中端会进行如下报错
/**@type {import('webpack' .Configuration)}*/
const path = require('path')
module.exports = {
//配置打包后是为开发开发环境
mode:'development',
//输入的文件入口
entry:'./src/index.js',
//输出的文件配置
output:{
path:path.resolve(__dirname,'dist'),
filename:'webpack.dist.js',
//是否每次都先清除原有文件后在打包
clean:true
},
// module:{
// rules:[
// {
// test:/\.css$/,
// use:['style-loader','css-loader']
// }
// ]
// }
}其中报错的大体含义就是，在index.js中引入了index.css，然而webpack在打包的过程中，并不认知除JS文件以外的其他文件，因此就会报错是否缺少什么loader。如果在后续的开发过程中，如果遇到这种确实什么loader时，我们可以在npm的官网上，搜索相关的loader，例如这里是引入了CSS，因此我们搜索CSS loader，npm的官网上会告诉我们相关的使用方法。即将moudle注释的部分释放掉
因为我们只需要在开发环境中使用，在生产环境中不需要使用webpack，则我们只需要将这两个安装到开发环境中。
npm install css-loader --D
npm install style-loader --D其中的rules是一个对象数组，因为在webpack中，不会仅仅是使用一个loader，也会同时使用多个loader帮助webpack来解析除JS外的其他文件，且rules的执行顺序也很奇怪，是从下往上执行，即如果我们要优先执行的loader，我们就需要写在rules的最下面。且每个rules都有两个配置项，一个test即是我们这个loader是处理什么对象的，即测试对象。下面的use就是我们使用的loader
可能你们会有一个疑问，我们不是使用的是CSS吗？按道理来说，我们就只需要安装一个CSS-loader即可，那为什么要用style-loader呢？原因就是，我们使用后的CSS-loader来处理CSS时，webpack编译后就不在是CSS文件了，而只是一段JS代码，而使用style-loader的作用就是，将这段编译后的JS代码插入。最终才能将webpack不识别的CSS文件转化为可以识别的JS文件。反正无论是那种loader，都是基于webpack能识别的JS文件来进行转化的。
上面只是简单的针对CSS文件，webpack进行的相关处理，后续会深入讲解其他文件在webpack中怎样使用loader来进行模块化的处理。
三：webpack的具体流程
其实为什么要使用这两种的组合，因为在实际运用中，webpack在执行的过程中，首先会执行其配置文件中所配置的入口文件，在入口文件执行是，若执行要其引入的css文件时，由于webpack本身是不识别css文件，因此就会在其配置文件的moudle中的rules中去寻找对应的规则。例如这里就是寻找的css - loader和style - loader。且loader是链式结构的且是从右往左执行的，因此会优先执行靠右的loader后再执行靠左的loader。如果对应的顺序对调的话，就可能会出现依赖后者的前者先执行而报错。而其中的css - loader的作用就是会将我们所引入的CSS转化为对应的JS对象，其中存储这CSS中的相关属性包括属性，id选择器等。然后再通过style-loader中将前者所转化的JS对象进行执行，核心就是会动态的创建一个style标签，将前者所转化的JS对象动态的插入到header中。这样就将CSS文件成功的让webpack识别。