Webpack实战（四）：教教你如何轻松搞定-预处理器（loader）

前面三节，我主要给你们分享了有关webpack的一些配置的知识点，如何打包js文件，而若是咱们遇到其余类型的资源如图片、css、字体font等等，咱们该如何处理呢？今天会介绍预处理器（loader），它赋予了Webpack可处理不一样资源类型的能力，极大丰富了其可扩展性。

若是想了解Webpack的基础配置能够参考如下地址：

Webpack实战（一）：Webpack打包工具安装及参数配置

Webpack实战（二）：webpack-dev-server的介绍与用法

Webpack实战（三）：做为前端你不得不懂的Webpack资源入口和出口的配置

在一个项目中，咱们要面临着各类各样的资源，如何让Webpack很好的处理这些资源呢？这个时候咱们须要借助于预处理器（loader），loader的字面意思是装载器，在Webpack中它的实际功能则更像是预处理器。Webpack自己只认识JavaScript，对于其余类型的资源必须预先定义一个或多个loader对其进行转译，输出为Webpack可以接收的形式再继续进行，所以loader作的其实是一个预处理的工做。

loader配置

1. loader引入 若是咱们要引入css文件，webpack是无法处理的，如

// common.css
body {
  font-size: 20px;
  background: #0fc;
}
复制代码

//index.js
import './common.css'
复制代码

执行的结果如上图，因而可知，Webpack是没法处理css文件，咱们须要给安装预处理css-loader。安装步骤以下

npm install --save-dev css-loader
复制代码

而后咱们将loader 引入项目中，配置webpack.config.js配置以下：

const path = require('path')
module.exports = {
  context: path.join(__dirname, './src'),
  entry: {
    index: './index.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'index.js'
  },
  mode: 'development'，
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [ 'css-loader'],
      },
    ],
  }
}
复制代码

与loader相关的配置都在module对象中，其中module.rules表明了模块的处理规则。每条规则内部能够包含不少配置项，这里咱们只使用了最重要的两项—test和use。

• test可接收一个正则表达式或者一个元素为正则表达式的数组，只有正则匹配上的模块才会使用这条规则。 如以/.css$/来匹配全部以.css结尾的文件。
• use可接收一个数组，数组包含该规则所使用的loader，也能够是字符串，对象等。

不少时候，在处理某一类资源时咱们都须要使用多个loader。如，对于SCSS类型的资源来讲，咱们须要sass-loader来处理其语法，并将其编译为CSS；接着再用css-loader处理CSS的各种加载语法；最后使用style-loader来将样式字符串包装成style标签插入页面。 下面引入style-loader,安装命令以下：

npm install --save-dev style-loader
复制代码

配置代码以下：

const path = require('path')
module.exports = {
  context: path.join(__dirname, './src'),
  entry: {
    index: './index.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'index.js'
  },
  mode: 'development'，
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  }
}
复制代码

此时再进行打包，样式就会生效了，应该会看到页面中插入了一个style标签，包含了CSS文件的样式，这样咱们就完成了从JS文件加载CSS文件的配置。 打包效果以下图：

运行效果以下图

把style-loader放在css-loader前面，这是由于在Webpack打包时是按照数组从右边往左边的顺序将资源交给loader处理的，所以要把最后生效的放在左边。

loader做为预处理器一般会给开发者提供一些配置项，在引入loader的时候能够经过options将它们传入

module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 
          {
            loader: 'css-loader',
            options: {
              // 有关css-loader的配置
            }
          }
        ],
      },
    ],
  }
复制代码

2. 其余配置 exclude与include是用来排除或包含指定目录下的模块，可接收正则表达式或者字符串（文件绝对路径），以及由它们组成的数组

module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
        exclude: /node_modules/
      },
    ],
  }
复制代码

exclude规则内的使node_modules中的模块不会执行这条规则。该配置项一般是必加的，不然可能拖慢总体的打包速度。

module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
        include: /src/
      },
    ],
  }
复制代码

include表明该规则只对正则匹配到的模块生效。假如咱们将include设置为工程的源码目录，天然而然就将node_modules等目录排除掉了。

若是exclude 和include同时存在，则exclude权限比较高

resource与issuer可用于更加精确地肯定模块规则的做用范围,在Webpack中，咱们认为被加载模块是resource，而加载者是issuer

module: {
    rules: [
      {
        use: ['style-loader', 'css-loader'],
        resource: {
          test: /\.css$/i,
          exclude: /node_modules/
        },
        issuer: {
          test: /\.js$/i,
          exclude: /node_modules/
        }
      },
    ],
  }
复制代码

经过添加resource对象来将外层的配置包起来，区分了resource和issuer中的规则，这样就一目了然了。

enforce用来指定一个loader的种类，只接收“pre”或“post”两种字符串类型的值。事实上，咱们也能够不使用enforce而只要保证loader顺序是正确的便可。配置enforce主要的目的是使模块规则更加清晰，可读性更强，尤为是在实际工程中，配置文件可能达到上百行的状况，难以保证各个loader都按照预想的方式工做，使用enforce能够强制指定loader的做用顺序。

经常使用的预处理器

1. babel-loader用来处理ES6+并将其编译为ES5，它使咱们可以在工程中使用最新的语言特性，同时没必要特别关注这些特性在不一样平台的兼容问题。

npm install babel-loader babel-core babel-preset-env
复制代码

• babel-loader：它是使Babel与Webpack协同工做的模块。
• babel-core：顾名思义，它是Babel编译器的核心模块。
• babel-preset-env：它是Babel官方推荐的预置器，可根据用户设置的目标环境自动添加所需的插件和补丁来编译ES6+代码。 配置文件以下：

{
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          cacheDirectory: true,
          presets: [
            [
              'env', {
                modules: false
              }
            ]
          ]
        }
      }
    }
复制代码

因为babel文件很大没，因此要排除node_modules|bower_components 对于babel-loader自己咱们添加了cacheDirectory配置项，它会启用缓存机制，在重复打包未改变过的模块时防止二次编译，一样也会加快打包的速度 babel-loader支持从.babelrc文件读取Babel配置，所以能够将presets和plugins从Webpack配置文件中提取出来，也能达到相同的效果。

2. ts-loader ts-loader与babel-loader的性质相似，它是用于链接Webpack与Typescript的模块,安装命令以下：

npm install ts-loader typescript
复制代码

webapck.config.js配置以下

rules: [
	{
	test: /\.ts$/,
	use:'ts-loader' 
	}
]
复制代码

3. html-loader html-loader用于将HTML文件转化为字符串并进行格式化，这使得咱们能够把一个HTML片断经过JS加载进来。
4. handlebars-loader handlebars-loader用于处理handlebars模板，在安装时要额外安装handlebars。
5. file-loader file-loader用于打包文件类型的资源，并返回其publicPath。

总结

有关Webpack预处理器（loader）就暂时分析到这里，这仅表明我的观点,欢迎拍砖，如想了解更多请扫描下面：