webpack系列教程之Module篇

来瓶二锅头00
199 阅读1分钟

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

前言

上一章中我们说到了loader的使用，他的配置是通过配置module.rules来配置的。这篇章我们一起来看看module究竟有哪些配置以及他究竟干了啥。module顾名思义，模块的意思，因此我们可以通过在此配置中配置webpack不同模块所需要的配置。

常见的配置

对于模块，我们常见的配置与以下两个。

名称数据格式描述
rulesArray解析模块是，匹配的规则数组。每个规则匹配后需要有相对应的loader
noParseRegExp忽略对于给定的正则表达式

Rules

根据上表我们知道Rules是一个数组，此数组包含一定的规则以及所对应的loader.那么我们来看下其究竟有哪些配置

test

配置指定项目中所有的文件(包括node_modules)中符合规则的文件。其数据格式为RegExp。例如：

module.export = {
    module:{
        rules:[{
            test:/\.js$/
        }]
    }
}

上面配置是将项目中所有的js文件通过相对于的loader进行处理。

exclude

配置不需要处理的文件或者文件夹。其数据格式为Array<RegExp>|RegExp|Function 例如：

module.export = {
    module:{
        rules:[{
            exclude:[/node_modules/]
        }]
    }
}

上面的配置会将除node_modules文件夹外的所有符合规则的文件进行处理

include

配置需要处理的文件或者文件夹。其数据格式为Array<RegExp>|RegExp|Function，其跟exclude是互斥的。因此一般include能指定所需要处理的文件事，不推荐配置exclude. 例如：

module.export = {
    module:{
        rules:[{
            include:[/node_modules/]
        }]
    }
}

上面的配置会将node_modules文件夹中符合规则的文件进行处理。我们可能会发出一个疑问，那就是如果exclude和include以及test同时存在，且其中存在相同的文件，该以谁的为主呢？答案是：exclude。也就是说如果这样配置：

module.export = {
    module:{
        rules:[{
           exclude:[/node_modules/] 
           include: [ path.resolve(__dirname, './node_modules/a.js')]
        }]
    }
}

按照上面的配置，include的配置是无效的。但是反过来是有效的，大家可以自己去试下。

use

配置符合上面规则的文件所需要的loader.每一个入口只能使用一个loader.其数据格式为Array<any>|Function(info)。前面我们也说到了loader是可以链式调用的，说到的就是这个

数组配置

他是从数组的最右边开始执行。常见的配置有两种：

  1. 简写模式
module.exports = {
    module:{
        rules:[{
            use:['style-loader','css-loader']
        }]
    }
}

这种情况适用于，不需要配置具体loader的信息，采用其默认值方式。

  1. 非简写模式
module.exports = {
    module:{
        rules:[{
            use:[{
                loader:'style-loader',
                options:{

                }
            },{
                loader:'css-loader',
                options:{}
            }]
        }]
    }
}

此模式适用于我们知道一些具体的loader需要一些特殊的配置的场景。

Function

use也支持一个函数。此函数接收一个对象，返回值为一个数组。数据格式为

(obj) => Array<any>

具体参数为：

名称描述
compiler当前webpack的编译器
issuer模块的路径，该元素正在导入一个被加载的模块
realResource总会是被加载模块的路径
resource被加载的模块路径，它常常与 realResource 相等，只有当资源名称被 request 字符串中的 !=! 覆盖时才不相等

例如：

module.exports = {
  module: {
    rules: [
      {
        use: (info) => [
          {
            loader: 'svgo-loader',
            options: {
              plugins: [
                {
                  cleanupIDs: {
                    prefix: basename(info.resource),
                  },
                },
              ],
            },
          },
        ],
      },
    ],
  },
};
oneOf

从名称上能够看出，是其中一个的意思，因此当如果配置了此配置，将会只使用第一个匹配到的规则，例如：

module.exports = {
    module:{
        rules:[{
            test: /.css$/,
            oneOf: [
                {
                resourceQuery: /inline/, // foo.css?inline
                use: 'url-loader'
                },
                {
                resourceQuery: /external/, // foo.css?external
                use: 'file-loader'
                }
            ]
        }]
    }
}

未完待续

avatar
文章
阅读
粉丝