前端开发中webpack常用的node-sass、sass-loader、style-loader等区别作用

本篇文章将介绍 前端开发中webpack常用的node-sass、sass-loader、style-loader、less-loader、style-loader等区别作用；

讲解之前先要介绍一下node？

1，前端开发人员为什么要安装Node

一，传统的JavaScript

传统的js是运行在浏览器上的，因为浏览器内核分为两个部分：渲染引擎---渲染HTML和CSS； JavaScript 引擎—负责运行 JavaScript。
随着技术的发展， Chrome 使用的 JavaScript 引擎是 V8，它的速度非常快且性能好，同时由2009年5月RyanDahl开发的Node.js诞生。

二、什么是Node.js?

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。

三、前端开发为什么需要安装Node

1. Node.js有一个很棒的包管理系统NPM,通过运行“npm install 包名”几乎可以安装任何包/库。另外，通过package.json文件可以跟踪依赖关系。
2. 模块生态系统对所有人开放，任何人都可以发布自己的模块，发布的模块将出现在npm 存储库中。
3. Node.js是基于javascript开发的语言，这对前端人员来讲学习门槛较低，很容易理解掌握，而不是从头开始学习一门新的语言。

2，node-sass和sass-loader

webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。你可以使用 Node.js 来很简单地编写自己的 loader。

node-sass是一个项目依赖，在一个项目中在使用sass语法的时候，必须通过sass-loader来解析sass，从而使sass语法变成浏览器能够识别的CSS语法;
而node-sass模块就是对sass-loader的支持模块，所以不安装node-sass，sass-loader就不能正常工作；
安装：

npm install --save-dev sass-loader
npm install --save-dev node-sass
或者选择版本4.14.1和设置淘宝镜像来安装
npm i node-sass@4.14.1 --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

3，less-loader

less-loader 用于处理编译 .less 文件，将其转为 css文件代码。
使用 less-loader 的话，必须安装 less，单独一个 less-loader 是没办法正常使用的。

npm install --save less-loader less

4，其它比较重要的样式loader

下面都是webpack常用的样式配置loader；详细链接；

• style-loader 将模块的导出作为样式添加到 DOM 中
• css-loader 解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码
• less-loader 加载和转译 LESS 文件
• sass-loader加载和转译 SASS/SCSS 文件
• postcss-loader 使用 PostCSS 加载和转译 CSS/SSS 文件
• stylus-loader加载和转译 Stylus 文件