webpack（五）：loader的使用

  在之前的内容，主要是用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关的依赖。但是，在开发中不仅仅有基本的js代码处理，还需要加载css，图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等。
  对于webpack本身的能力来说，对于这些转化是不支持的。
  那怎么办呢？给webpack扩展对应的loader就可以啦。
  因此，loader是webpack中一个非常核心的概念。
5.1 loader使用过程：
5.2 css文件处理：准备工作
5.3 css文件处理：css-loader
5.4 less文件处理：准备工作
5.5 less文件处理：less-loader
5.6 图片文件处理：准备工作
5.7 图片文件处理：url-loader
5.8 图片文件处理：修改文件名称
5.9 ES6语法处理：babel-loader

5.1 loader使用过程：

步骤一：通过npm安装需要使用的loader
步骤二：在webpack.config.js中的modules关键字进行配置。
注：大部分loader我们都可以在webpack的官网中找到，并且学习对应的用法

5.2 css文件处理：准备工作

项目开发过程中，我们必然需要添加很多的样式，而样式我们往往写到一个单独的文件中。
在src目录中，创建一个css文件，其中创建一个normal.css文件。

代码内容：

但是，这个时候normal.css中的样式会生效吗？
当然不会，因为我们压根就没有引用它，webpack也不可能找到它，因为我们只有一个入口main.js，webpack会从入口开始查找其他依赖的文件。
在入口main.js文件中引用：

进行重新打包，切换到项目的路径下

执行npm run build

注意：这个时候，会出现如下错误：因为加载normal.css文件必须有对应的loader

5.3 css文件处理：css-loader

进入www.webpackjs.com，点击右边中文文档

找到LOADERS

找到我们的样式

找到css-loader，点击进入

css-loader的详细用法界面

步骤一：通过npm安装css-loader

步骤二：在webpack.config.js中的modules关键字进行配置。

重新打包：

但是，运行index.html，你会发现样式并没有生效。原因是css-loader只负责加载css文件，但是并不负责将css具体样式嵌入到html中，这个时候，我们还需要一个style-loader帮助我们处理。
在网站上找到style-loader

安装style-loader

配置

按照我们的逻辑，在处理css文件过程中，应该是css-loader先加载css文件，再由style-loader来进行进一步的处理，为什么会将style-loader放在前面呢？
因为webpack在读取使用的loader的过程中，是按照从右向左的顺序读取的。

5.4 less文件处理：准备工作

如果我们希望在项目中使用less、scss、stylus来写样式，webpack是否可以帮助我们处理呢？
这里以less为例，其他也是一样的。
先创建一个less文件，依然放在css文件夹中

代码内容：

在入口main.js文件中引用：

进行重新打包，切换到项目的路径下

执行npm run build

注意：这个时候，会出现如下错误：因为加载special.less文件必须有对应的loader

5.5 less文件处理：less-loader

继续在官方中查找，我们会找到less-loader相关的使用说明

步骤一：通过npm安装less-loader

步骤二：在webpack.config.js中进行配置。

加上文字，才能看到效果。

重新打包：

效果：

5.6 图片文件处理：准备工作

首先，我们在项目中加入两张图片：
一张较小的图片person01.jpg(小于8kb)，一张较大的图片person02.jpg(大于8kb)
待会儿我们会针对这两张图片进行不同的处理。
先考虑在css样式中引用图片的情况，所以我更改了normal.css中的样式：

进行重新打包

注意：这个时候，会出现如下错误：因为加载图片必须有对应的loader

5.7 图片文件处理：url-loader

图片处理，我们使用url-loader来处理

步骤一：通过npm安装url-loader

步骤二：在webpack.config.js中进行配置。

再次打包，

运行index.html，就会发现我们的背景图片显示了出来。

而仔细观察，你会发现背景图是通过base64显示出来的。这也是limit属性的作用，当图片小于8kb时，对图片进行base64编码

那么问题来了，如果大于8kb呢？我们将background的图片改成person02.jpg

重新打包

出现如下错误，这是因为大于8kb的图片，会通过file-loader进行处理，但是我们的项目中并没有file-loader

所以，我们需要安装file-loader

会发现dist文件夹下多了一个图片文件

运行index.html，会发现图片没显示。这是因为图片使用的路径不正确


将图片移动到项目的路径下

刷新网页，有效果了

但是，真实打包是把图片打包到dist目录下，所以不能将图片放在项目路径下。那该怎么办呢？
需要在webpack.config.js中进行配置

重新打包

打开网页：

5.8 图片文件处理:修改文件名称

我们发现webpack自动帮助我们生成一个非常长的名字
但是，真实开发中，我们可能对打包的图片名字有一定的要求
比如，将所有的图片放在一个文件夹中，跟上图片原来的名称，同时也要防止重复
所以，我们可以在webpack.config.js中，对options添加上如下选项：
: img：文件要打包到的文件夹
: name：获取图片原来的名字，放在该位置
: hash:8：为了防止图片名称冲突，依然使用hash，但是我们只保留8位
: ext：使用图片原来的扩展名

重新打包

查看目录结构

5.9 ES6语法处理：babel-loader

  如果你仔细阅读webpack打包的bundle.js文件，发现写的ES6语法并没有转成ES5，那么就意味着可能一些对ES6还不支持的浏览器没有办法很好的运行我们的代码。

如果希望将ES6的语法转成ES5，那么就需要使用babel。
而在webpack中，我们直接使用babel对应的loader就可以了
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

步骤一：通过npm安装babel-loader

步骤二：在webpack.config.js中进行配置。

重新打包，查看bundle.js文件，发现其中的内容变成了ES5的语法

参考文档