webpack—常用的loader加载器的使用

前言

这一章主要讲解了webpack中一个很重要的功能，加载器-loader。上一章讲到，webpack可以打包不同类型的文件，而webpack本身仅支持js文件的模块化打包，所以其他类型的文件需要不同的loader进行转化加载。下面我们将以几种常见的loader来介绍loader的用法

css-loader

前端应用免不了使用的就是css代码，如果通过常规的link方式，会将所有的样式都进行加载，但实际上，页面使用到的样式是只有一部分的。所以很大程度上，样式并不能被有效的利用。
webpack打包可以使资源按需加载，也就是我用到你再加载，这样就可以有效的解决上面的问题

示例
编写一个header的样式放在main.js中，在main.js中引入该文件，并在标签中中引入该类

1. 首先需要安装对应的模块css-loader、style-loader
   css-loader主要是将css文件的内容进行转化，而style-loader则是将我们转化后的css代码重新通过style标签插入到页面中。

   yarn add css-loader style-loader --dev
   

   // mian.js
   import './main.css'
   

   .my-header{
     width: 100%;
     height: 50px;
     line-height: 50px;
     background-color: #555;
     color: #fff;
     text-align: center;
   }
   

   2. 在webpack中配置对应的参数

   
   const path = require('path')
   
   module.exports = {
     mode: 'development',
     entry: './src/main.js',
     output: {
       filename: 'bundle.js',
       path: path.join(__dirname, 'dist')
     },
     module: {
       rules: [{ // 存放所有的loader
         test: /.css$/, // 匹配文件类型的正则表达式
         // loader: '只能配置一个loader',
         use: ['style-loader', 'css-loader'] // 匹配对应文件后使用的loader，loader执行的顺序是从右向左
       }]
     }
   }
   

   rules中存放了loader的规则，每一个对象都是一个loader对象

   test属性是整个正则表达式，用于匹配对应类型的文件，/.css$/表明匹配css后缀的文件

   use属性则是规定匹配到对应文件后需要使用的loader(一个或多个)，use属性可以是字符串或者是数组，都是用于指明loader模块，需要注意的是loader执行的顺序是从右向左.以上面为例子['style-loader', 'css-loader']，当匹配到对应的css文件后，先执行css-loader，在执行style-loader，这是规定好的。

   loader属性也是规定匹配到对应文件后需要使用的loader，但和use不同的是，它仅可以是字符串，也就是只能规定一个loader

   3. 打包结果和显示
      开始打包，并在打包完成后启动server服务

   yarn webpack
   
   http-server .
   

   
   

babel-loader

babel-loader是用于转化js文件的，可以将高级语法转化为低级语法，也是在项目中较为常用的一个loader

• 为什么需要使用babel-loader，webpack并不会帮助我们去对代码进行降级处理，而在一些浏览器中，是无法使用高级语法的。如果我们希望使用高级语法的新特性，并同时兼容低版本的浏览器，就需要代码降级处理

模块安装
这里需要安装三个模块babel-loader、@babel/core、@babel/preset-env，也是开发依赖

• babel-loader并不做实际的转化操作，只是一个平台或者媒介来引入babel
• @babel/core是babel编译的一个环境
• @babel/preset-env是集成了大部分语法转化的操作

yarn add babel-loader @babel/core @babel/preset-env --dev

配置
基本的使用方式和css-loader是类似的，但babel需要配置对应的选项参数，所以比css-loader要复杂一些，下面我们具体说说

{
	... // 省略代码请参考前面的内容
	module: {
	   rules: [{
	     test: /.js$/,
	     use: {
	       loader: 'babel-loader',
	       options: {
	         presets: ['@babel/preset-env']
	       }
	     }
	   }]
	 }
 }

在配置babel-loader的时候，use不是字符串也不是数组，而是一个对象，因为babel-loader并不能帮助我们转化代码，真正的转化操作还需要靠babel模块来实现，因此我们需要配置loader下面的选项参数，因此需要使用对象，

该对象中loader就是我们需要使用的loader的名称，options则是对应的选项参数，我们需要添加一个presets: ['@babel/preset-env']属性，若是我们不配置options参数，则无法转化成功

代码实现
我们在其中一个模块中使用一个箭头函数，并开启打包。来看看是否有转化成功

可以看到，箭头函数转化成了普通的函数

file-loader

在项目中我们还可能会使用到图片等其他类型的文件，若是引入之后直接打包可能会报错

而打包这类文件资源的loader可以使用file-loader

安装模块
同样第一步我们需要安装对应的模块file-loader

yarn add file-loader --dev

配置

{
	...
	module: {
		rules: [{
			test: /.png$/,
			use: 'file-loader'
		}]
	}
}

打包

可以看到已经打包成功了，我们开启服务看一下是否正常

可以看到正常运行

---

以上内容仅供学习参考