webpack整理（五）

sass-loader和babel-loader
使用sass-loader需要同时安装node-sass
安装：
npm i less-loader node-sass -D

在项目中创建scss文件，（.sass和.scss都是文件的后缀，scss是新的版本的写法），然后在webpack.config.js中配置如下即可

babel-loader是用来编译es6
使用babel-loader需要同时下载 @babel/core 和 @babel/preset-env

安装： npm i babel-loader @babel/core @babel/preset-env -D

babel-loader的使用只需如下图配置即可

这个时候对babel-loader的配置就完成了，但是如果我们的es6代码出错了

比如源文件是这样的，但是当我们去调试的时候，发现我们在浏览器里看到的是编译后的文件

这样会对我们的调试工作带来很大的麻烦，这个时候我们需要在与module的同级的下边配置source-map

这时候我们再从新编译，我们会看到调试的时候，与源代码是一样的