webpack loader在 webpack 中表示的含义是预处理器。由于 webpack 能理解的文件只有 Jav

A loader is a node module exporting a function，即 loader 是导出函数的节点模块

什么是 webpack loader

loader，在 webpack 中表示的含义是预处理器。

由于 webpack 能理解的文件只有 JavaScript 和 JSON 文件，像 css 、图片文件、jsx 等类型的文件是无法识别的，如果直接引入会提示模块解析失败的错误。

所以需要使用 loader 来让 webpack 去处理之外的文件（loader 可以将所有类型的文件转换为 webpack 能够处理的模块，比如在项目中常见的 TypeScript 转换为 JavaScript）

如下是一段 less 的代码，在展示页面前，需要将 less 语法转换成浏览器可以识别的 css 的语法（因为浏览器无法识别 less）

.box {
    width: 500px;
    border: 1px solid;
    .title {
        font-size:28px;
    }
}

转换之后的形式如下：

.box {
    width: 500px;
    border: 1px solid;
}
.box  .title {
    font-size:28px;
}

常见的 webpack loader

css-loader：解析CSS文件，也可以解析 @import 等 css 语法
style-loader
postcss-loader：css 自动添加兼容性前缀（低版本 ie 不支持某些语法）
eslint-loader
babel-loader：将ES6转化为ES5，打包处理js文件中的高级语法
image-loader：载并且压缩图⽚⽂件
url-loader：打包处理css中与url路径相关的文件

除此之外还有很多 loader，比如：如果想要将前面的 less 代码转换成 css 代码，就需要使用 less-loader，若是 scss ，使用 sass-loader。

less-loader 的使用

安装：

npm install less-loader less -D

引入规则：

打开 webpack.config.js文件，找到 module 属性，并在 rules 数组中添加 loader 规则（test 属性表示匹配的文件类型，use 属性表示要调用的loader），最后重新启动项目即可。

babel-loader

babel-loader 可以打包处理 js 文件中的高级语法

安装：

npm install babel-loader @babel/core @babel/runtime -D
// 语法插件相关
npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

在项目根目录下创建 babel.config.js 文件，并声明导出模块：

找到 webpack.config.js 文件中的 module 属性，并在 rules 数组中添加：

{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}