less-loader 和 babel-loader 都比较简单，我们直接进入正题：
首先我们知道，要想用 less，你肯定要先安装它，但是这里，我们需要安装两个东西：
npm install less-loader less -D
那么我们为什么安装了 less-loader 之后，还要安装 less 呢？
这是因为 less-loader 它本身只是一个桥梁，类似于一个接口，它可以让 webpack 去访问 less 的功能，但是 less-loader 本身并没有让 css 变成动态语言的功能，比如增加变量、Mixin、函数等特性。
所以其实 less 才是它的内核，真正的编译，靠的还是 less。
那么接下来我们就试试：
我们继续采用之前的文件目录，新建一个文件夹 less，并新建 1.less，给 body 增加红色背景：
然后在 index.js 里面引入：
同时，我们再把 webpack.config.js 里面的 loader 都清空，回复到基础配置：
那么我们先来编译的试试，不用说，肯定是会报错的：
报错是意料之中的，它说：我不认识 1.less 这个文件，你可能需要某种 loader 来处理它。
那么我们就来配置它：
那么这样配置正确吗？相信看完前面博客的都会知道，肯定是不行的。
因为 less-loader 能做的，仅仅只是编译 less 本身，我们还需要2个东西来帮忙：style-loader，css-loader。
这里需要注意下它们的顺序。
简单来说，首先 less-loader 会先编译 .less 文件，编译完之后，就变成普通的 css 文件了。
然后再将这个 css 文件交给 css-loader 来处理，它主要是读取、解析 css 文件、包括 import 引用的那些东西。
等到 css-loader 处理完了之后，再把结果交到 style-loader 输出到页面上，这样就 OK 了。
所以，如果我们只用 less-loader，css 是引不进来的。
然后我们重新编译：
可以看到 less 的使用非常简单，然后让我们来看下怎么编译 ES6。
如果我前面的博客都有看过的话，这一篇的内容就会觉得特别简单，相当于一个巩固。
编译 ES6，需要 babel，这里就直接下载了：
npm install babel-loader @babel/core @babel/preset-env -D
同样的，babel-loader 这里也只是起一个桥梁的作用，光有它是不管用的。
那么我们还需要 babel 本身，也就是 @babel/core，这个必须得有。
最后，我们还需要一个环境预设，我们前面也说过，这里就不说了。
然后我们就直接来配置了：
jsx 文件也是可以用 babel 编译的。
还记得我们前面说过的 .babelrc 文件吗？它里面的值就是一个 json。其实我们这里配置 options 的值，也就是那个 json。
（如果这里看不太懂的话，建议看下我前面的博客：Babel 离线编译。）
这里设置的意思就是说：babel 你编译的时候，就听 preset-env 环境预设的配置就行了。
babel 和 preset-env 的关系就像 postcss 和 autoprefixer，是一样的。
一个是干活的，一个是指挥的。
然后我们在 index.js 里面写一点 ES6 代码，并且编译后，打开谷歌浏览器和 IE 各个版本：
可以看到，谷歌，IE 11 ~ 5 都是没有问题的。
如果我们不加 babel ，IE 7 ~ 5 肯定是报错的。所以，这就是 babel 的作用，能够帮助我们来编译东西。
接下来，我们来说下调试：
我们都知道，ES6 的编译能帮我们很多忙，但是调试起来不容易，尤其是报错的时候。
比如，我们在 index.js 里面故意写错代码：
然后我们重新编译，并用浏览器打开：
报错是肯定的，但是，如果我们想调试，从这里点进去的话，可以看到：
注意！！！ 它这里显示的，是已经编译后的代码。
这不是我们原本的代码，我们原本的代码是用 ES6 的语法 let 和 箭头函数。
那我怎么样才能看到原本的代码呢？
这时候，我们就需要一个工具：source-map。那么 webpack 怎么用呢？
那么我们这里就会又多出了一个新的选项：devtool，也就是开发工具的意思。
devtool: 'source-map' 的意思就是说，我需要你把 source-map 这个开发工具，给启用起来。
这样的话，它就会自动的生成一个 source-map。
那么我们重新编译，这时候你就会发现，这次编译会略微慢一些，同时，它会给我们生成两个文件：
一个还是 bundle.min.js。
而另一个就是 bundle.min.js.map，这个就是 source-map 文件。
那么你要做的，就是把这 2 个文件放在同一个目录下边，它们文件前面的名字是一样的，那这时候，如果打开浏览器，进入了调试工具，它就会自动的来读取那个 map 文件。
当然前提是它找的到，如果找不到就，它就放弃了。
那么我们现在打开浏览器看看：
这时候，我们就会发现和刚才不一样了，现在我们看到的就不是编译后的代码，而是原本的代码了。
当然，这里仅仅只是 4 行代码，可能并没有太大的区别。但是我们在项目中，往往都是上万行代码的，这样的话，就会给我们的调试工作带来很大的好处了。
