wepack4+plugins+loaders项目复盘总结(下)

承接上篇：https://blog.csdn.net/qq_39989929/article/details/89297108

因为webpack默认只能处理js类型的文件，当项目中导入其他类型的文件，webpack在打包编译时就会报错，所以需要第三方loader来处理其他类型的文件。

先展示一下webpack处理非js类型文件的过程；

接下来，就具体处理文件的类型，总结一下其所需要的第三方loader以及其所依赖的模块；

在正式总结之前，需要说明，第三方loader的配置项依旧是写在webpack.config.js文件中，如下图：

在配置文件的暴露对象中增加module对象，并在对象中添加rules数组，用来存储对非js类型文件的处理规则；还有一点对于use内的loader，调用顺序为从右向左依次进行调用；test则是匹配文件后缀名的正则表达式；

一、对css/less/sass文件的处理

1、处理css文件，需要使用style-loader与css-loader

关于安装，即可通过npm进行安装，然后将配置规则写入配置文件，要注意调用顺序，先调用css-loader，再调用style-loader

2、处理less文件，需要使用less-loader

依旧是npm安装，但其内部依赖less模块，所以需要通过npm安装less模块，因为是内部依赖所以不用写入配置文件；另外less-loader将less文件转为css，所以还是需要css-loader、style-loader进行进一步处理；

3、处理sass文件，需要使用sass-loader

通过npm安装，sass-loader内部依赖node-sass模块，所以需要通过npm安装，关于处理规则以及loader调用顺序，类比less就好；

二、对于url地址的处理

当你配置好css/less/sass的第三方loader后，再次打包发现依旧报错，因为文件中的图片或字体使用到了url地址，所以仍旧会出现错误，这就需要借助第三方的url-loader来解决这个问题；

关于安装，仍然通过npm安装，url-loader内部依赖file-loader也是通过npm进行安装；

1、处理图片文件

我们先上图

可以看到对于图片url的处理规则与其他规则在use属性上有些不同，？后面的东西类似url地址后要传递的参数，对的，这些就是要传递的参数，下面来总结一下传递的参数；

第一个参数名为limit，限制?确实提供了一个限制，这个6000为图片的字节数(byte)，当图片大于6000byte时，不再将图片转为base64格式的图片字符串；

第二个参数为name，因为默认会使用32位哈希值更改图片的名字，所以我们可以通过设置禁止修改图片的名字或将图片命名为规定的格式；

name=[name].[ext] 表示不更改图片的名称；

name=[hash:8]-[name].[ext] 表示图片命名为八位哈希值+图片原本的名称；

2、处理字体文件

非常平常，没有什么可以补充的，就到这吧；

三、对更高级ES6/7语法的处理

webpack只能处理一部分ES6语法，所以更高级的语法需要借助Babel来处理；

使用npm安装babel-loader，并在配置文件内创建规则

exclude属性为去除的node_modules文件夹下的文件，如果不小心转了里面的文件，呵呵，没试过，估计挺爽的；

好了，babel-loader安装完毕之后还没有完，babel-loader涉及多个内部依赖，而且还存在版本不兼容问题；

babel-loader的内部依赖包为babel-core与babel-preset-env，babel-preset-env为转码规则集，babel-core与babel-loader存在兼容性问题；

@8的babel-loader需要@7的babel-core，但目前从官网下载的最新版本依旧是@6，所以我们只能将babel-loader降一个版本，使用@7；

官网版本依旧是@6，具体在深入还没来得及搞清楚，只知道兼容性存在问题；

另外，安装完依赖之后，我们还需要一个.babelrc配置文件，将转码规则集配置其中

目前只需要配置第一项即可；

另外，babel-loader只能将高级的语法转换，但不能将高级的API转换为浏览器可识别的API；若要实现高级API的转换还需要安装babel-polyfill与配套插件babel-plugin-transform-runtime；详细的就不再展开了。