webpack配置支持sass相关

webpack自身是只理解JavaScript文件的，那么webpack怎么去处理我们项目中用到的.css、.scss、.ts之类后缀的文件呢？

webpack通过Loader和插件（plugins）来扩展自身的功能。

loader

loader让 webpack 能够去处理那些非 JavaScript 文件，经过loader处理后可以将所有类型的文件转换为webpack能够处理的有效模块，然后你就可以利用webpack的打包能力，对它们进行处理。

插件（plugins）

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

支持 Sass

Sass是一款css预处理语言，支持变量，嵌套，mixin和导入等功能，可以很大程度上方便和简化css的写法。

支持sass支持sass首先需要安装sass-loader和node-sass 另外还需要安装style-loader和css-loader

npm install -D sass-loader node-sass style-loader css-loader

这时候就需要注意一个顺序问题了，需要用到的三个loader

sass-loader将sass代码编译成css（默认通过node-sass），然后css-loader将编译出来的代码编译成符合CommonJS的代码，最后style-loader将编译后的代码再转为js代码，然后webpack就可以识别，进行后续打包操作，而且webpack进行loader编译的顺序是从下到上的，这样我们在webpack中的配置就很简单了，在module.rules进行配置：

webpack配置解析sass文件：