webpack loader

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

使用loader，我们首先要安装loader，

有三种使用 loader 的方式：

1.配置（推荐）：在 webpack.config.js 文件中指定 loader。

在 webpack 的配置中 loader 有两个目标：

1. test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
2. use 属性，表示进行转换时，应该使用哪个 loader。

 module.rules允许你在 webpack 配置中指定多个 loader。 这是展示 loader 的一种简明方式，并且有助于使代码变得简洁。同时让你对各个 loader 有个全局概览：

2.内联：在每个 import 语句中显式指定 loader。

可以在 import 语句或任何等效于“import”的方式中指定 loader。使用 ! 将资源中的 loader 分开。分开的每个部分都相对于当前目录解析。

3.CLI：在 shell 命令中指定它们。

我们通常使用配置的方式使用loader

一、加载css

如果直接打包，样式无法显示，原因是无法解析，所以需要引入loader

1.安装style-loader和css-loader

命令：npm install style-loader css-loader --save-dev

注意：style-loader必须放在css-loader前；

2.创建css文件并运行命令

创建index.css文件并import进index.js文件中

3.打包后打开index.html，样式应用成功。

二、编译less和sass

1.less

（1）处理效果

（2）安装less-loader和less

命令：npm install less-loader less --save-dev

（3）配置loader

（4）创建less文件并运行命令

创建index.less文件并import进index.js文件中

（5）打包后打开index.html，样式应用成功。

2.Sass

（1）处理效果

（2）安装sass-loader和node-sass

命令：npm install sass-loader node-sass --save-dev

（3）配置loader

（4）创建scss文件并运行命令

创建index.scss文件并import进index.js文件中

（5）打包后打开index.html，样式应用成功。

三、使用PostCSS处理浏览器前缀

1.处理效果

2.安装postcss-loader和autoprefixer

命令：npm install --save-dev  postcss-loader autoprefixer

3.配置loader

需要和autoprefixer一起用

打包后检查网页，可以看到

或者在package.json里加上如下图设置：

如果在package.json中设置，webpack.config.js文件的配置就如下图所示：

四、文件处理

1.图片处理

（1）下载安装file-loader

命令：npm install --save-dev file-loader

（2）配置config文件

（3）配置options（根据自己的要求选择性设置）：

name：为你的文件配置自定义文件名模板（默认值[hash].[ext]）

context：配置自定义文件的上下文，默认为 webpack.config.js

publicPath：为你的文件配置自定义 public 发布目录

outputPath：为你的文件配置自定义 output 输出目录

[ext]：资源扩展名

[name]：资源的基本名称

[path]：资源相对于 context的路径

[hash]：内容的哈希值

2.字体文件处理

（1）下载字体文件

以bootstrap字体文件为例

Boostrap字体文件下载地址：https://v3.bootcss.com/getting-started/

（2）在index.js中引入bootstrap.css，在html中使用bootstrap字体图标

（3）配置config文件

3.第三方 js库处理

以jquery库为例子

（1）本地导入（和插件有关）

编写配置文件：

webpack.ProvidePlugin（webpack插件）参数是键值对形式，键就是我们项目中使用的变量名，值就是键所指向的库。webpack.ProvidePlugin会先从npm安装的包中查找是否有符合的库。

如果webpack配置了resolve.alias选项（理解成“别名”），那么webpack.ProvidePlugin就会顺着设置的路径一直找下去

使用webpack.ProvidePlugin前需要引入webpack

 引入jQuery文件后，在index.js文件中写入JQuery代码，

打包后检查。

（2）npm安装模块

安装jquery库

命令：npm install jquery --save-dev

直接在js里import引入

五、使用babel-loader转换es6

1.关于babel

目前，ES6（ES2015）这样的语法已经得到很大规模的应用，它具有更加简洁、功能更加强大的特点，实际项目中很可能会使用采用了ES6语法的模块，但浏览器对于ES6语法的支持并不完善。为了实现兼容，就需要使用转换工具对ES6语法转换为ES5语法，babel就是最常用的一个工具。

babel转化语法所需依赖项：

babel-loader： 负责 es6 语法转化

babel-core： babel核心包

babel-preset-env：告诉babel使用哪种转码规则进行文件处理

2.安装依赖

命令：npm install babel-loader @babel/core @babel/preset-env --save-dev

3.配置config文件

exclude表示不在指定目录查找相关文件

4.根目录新建 .babelrc 文件配置转换规则

5.打包

6.另一种配置方法，不需要在根目录新建 .babelrc 文件配置转换规则：