1、什么是loader?
loader是webpack中一个核心的概念。
webpack用来做什么呢？
在之前的实例中，我们主要是用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关的依赖。
但在开发中我们不仅仅有基本的js代码处理，我们也需要加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等。
对于webpack本身的能力来说，对于这些转化是不支持的。因此给webpack扩展对应的loader就可以了。
loader使用过程：
通过npm安装需要使用的loader
在webpack.config.js中的module关键字下进行配置
2、css文件处理-准备工作
项目开发过程中，需要添加很多的样式，而样式我们往往写到一个单独文件中。
在src目录中，创建一个css文件，其中创建一个main.css文件
我们可以把零散的js文件放在一个js文件夹中
此时main.css并不会生效，因为并没有引用它，webpack也不可能找到它，因为我们只有一个入口，webpack会从入口开始查找其他依赖的文件。
3、安装loader
使用 loader 告诉 webpack 加载 CSS 文件，安装相对应的 loader
npm install--save-dev css-loader
指示 webpack 对每个 .css 使用 css-loader
重新打包项目，运行index.html，发现样式并没有生效，原因是css-loader只负责加载css文件，并不负责将css具体样式嵌入到文档中。
这个时候，我们需要一个style-loader帮我们处理，安装style-loader
npm install--save-dev style-loader
配置webpack.config.js，配置完成后使用npm run build进行打包运行
注意：style-loader需要放在css-loader前面，因为webpack在读取使用loader过程中，是按照从右向左的顺序读取的。
4、less文件处理-准备工作
在项目中使用less、scss、stylus来写样式，webpack如何帮我们处理呢？
安装对应的loader，除了安装less-loader，还需要安装less，因为webpack会使用less对less文件进行编译
npm install --save-dev less-loader less
修改对应的配置文件，添加一个rules选项，用于处理.less文件
先创建一个less文件，放在css文件夹中，取名为index.less
在入口文件main.js中引入index.less依赖
