webpack系列教程之loader

来瓶二锅头00
2,770 阅读2分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第21天，点击查看活动详情。

前言

我们前面说到了，webpack其实只能识别js，对于其他的语言或者资源，识别不了，详见webpack初体验（一）。我们可以通过配置loader来对模块的不同类型源码进行转换。loader是在通过import阶段就会预处理文件。例如：loader会将所有的内联图片转换成data URL或者可以在js中直接importcss文件，因为在import的时候就会处理。

使用loader

当前webpack提供三种使用loader的方式:

  1. 通过webpack.config.js配置，通过在module.rules中配置多个loader。例如：
module.export = {
    module:{
        rules:[{
            test:'/\.css$/',
            use:'css-loader'
        }]
    }
}

此配置说明将所有的css文件通过css-loader处理。

  1. 在每个import语句中显式的指定所需要的loader。听过!将所需要的loader隔开。例如：
import Styles from 'style-loader!css-loader?modules!./styles.css';

此配置说明将styles.css通过style-loader，css-loader,modules三个loader进行处理

  1. 在shell命令中指定。例如：
webpack --module-bind 'css=style-loader!css-loader'

此配置说明对css文件使用style-loader和css-loader。

以上是使用loader的三种方式，但是推荐使用第一种方式。因为更容易扩展和可读以及维护。

配置

在webpack.config.js中我们需要将loader配置到module.rules数组中。可以指定多个loader。具体的使用过程如下：

我们以使用css-loader和style-loader为例

  1. 安装loader

我们在使用具体的loader的时候必须先安装对应的loader。通过npm安装即可

npm install -d css-loader
npm install -d style-loader
  1. 使用loader

我们上面说到了，我们的loader需要配置到module.rules中。其配置为一数组。其具体的数据格式为：

rules:Array<{
    test:string|正则|Function|Array|Object;
    use:Array<{
        loader:string;
        options?:Object
    }>
}>

从上面的数据格式，我们可以看出，每一项我们都必须有两个配置test和use。其中test是条件，是说明那些模块需要被处理。use是工具，是需要用那些loader来处理test匹配的模块。其中use又有一个必须的配置那就是具体的loader名。所以针对.css文件的loader的配置如下：

module.export = {
    module: {
        rules: [
        {
            test: /\.css$/,
            use: [
            { 
                loader: 'style-loader'
            },
            {
                loader: 'css-loader',
                options: {
                    modules: true
                }
            }
            ]
        }
        ]
    }
}

loader特性

通过上面的说明以及配置我们其实可以总结出loader的一些特性，那就是：

  1. loader是支持链式传递的。例如内联使用以及配置使用的时候。我们可以配置一组loader。按照配置的先后顺序进行处理模块。规则是从右往左边执行。只到处理完成

  2. 能够对特殊的loader进行配置。按照上面的数据格式我们可以看出，我们可以通过options针对不同的loader配置不同的配置。

  3. loader是支持同步也支持异步的。当我们使用async-loader的时候我们就能体会异步loader了。

这3个特性是我们上面的说明中能够得知到的loader特性。当然loader还有其他特性，例如：

  1. loader 运行在 Node.js 中，并且能够执行任何可能的操作。

  2. loader 接收查询参数。用于对 loader 传递配置。

  3. 除了使用 package.json 常见的 main 属性，还可以将普通的 npm 模块导出为 loader，做法是在 package.json 里定义一个 loader 字段。

  4. 插件(plugin)可以为 loader 带来更多特性。

  5. loader 能够产生额外的任意文件。

上面的5个特性我们需要通过后续的实例一一来说明。

以上就是loader的基础使用方法，后续我们将会说到如何编写一个loader.下一章我们将会介绍下我们常见以及常用的一些loader.

avatar
文章
阅读
粉丝