陌上寒

陌上寒个人博客

webpack4系列文章-(3)module(模块)

在模块化编程中,开发者将程序分解成离散功能块(discrete chunks of functionality),并称之为_模块_。

每个模块具有比完整程序更小的接触面,使得校验、调试、测试轻而易举。 精心编写的_模块_提供了可靠的抽象和封装界限,使得应用程序中每个模块都具有条理清楚的设计和明确的目的。官网链接地址

1、noParse

RegExp | [RegExp]

RegExp | [RegExp] | function(从 webpack 3.0.0 开始)

防止 webpack 解析那些任何与给定正则表达式相匹配的文件。忽略的文件中不应该含有 import, require, define 的调用,或任何其他导入机制。忽略大型的 library 可以提高构建性能。

制定一个正则,然后遇到匹配的就不解析,会节省时间。(不常用)

webpack.config.js

const webpack = require('webpack');
const env = process.env.NODE_ENV || 'production';

const config = {
    mode: env,
    module: {
     // noParse: /jquery|lodash/
     // 从 webpack 3.0.0 开始
     noParse: function(content) {
       return /jquery|lodash/.test(content);
     }
    },
    
}

module.exports = config;

2、rules

主要就是解析不同的模块,根据不用的文件使用不同的 loader。

rules 为一个数组,创建模块时,匹配请求的规则数组。这些规则能够修改模块的创建方式。这些规则能够对模块(module)应用 loader,或者修改解析器(parser)。

2.1  enforce

可能的值有:”pre” | “post”

更改了loader的执行顺序,具体参见下面的demo
制定loader的分类,不对该参数做配置时表示使用normal loader。
这个地方,说一下,官方翻译的有点过头了
另外支持一种inline loader,适用于内联的import/require。
loaders按照post,inline,normal,pre顺序执行。
normal类型的loader使用!前缀
normal和pre类型的loader使用-!前缀
normal,post,pre类型的loader使用!!前缀
不应该使用行内 loader 和 ! 前缀,因为它们是非标准的。它们可在由 loader 生成的代码中使用。

2.2  resource

既可以提供 Rule.resource 选项,也可以使用快捷选项 Rule.test,Rule.exclude 和 Rule.include。

设置匹配条件: 我们可以通过test、incluede、exclude 来筛选我们要编译处理的文件。

    2.2.1  Rule.test

设置匹配,

Rule.test 是 Rule.resource.test 的简写。如果你提供了一个 Rule.test 选项,就不能再提供 Rule.resource。

    2.2.2 Rule.exclude

不会编译被exclude匹配到的文件

Rule.exclude 是 Rule.resource.exclude 的简写。如果你提供了 Rule.exclude 选项,就不能再提供 Rule.resource。

    2.2.3 Rule.include

只编译被include匹配到的文件

Rule.include是 Rule.resource.include 的简写。如果你提供了 Rule.include 选项,就不能再提供 Rule.resource。

2.3  条件

条件可以是这些之一:

  • 字符串:匹配输入必须以提供的字符串开始。是的。目录绝对路径或文件绝对路径。
  • 正则表达式:test 输入值。
  • 函数:调用输入的函数,必须返回一个真值(truthy value)以匹配。
  • 条件数组:至少一个匹配条件。
  • 对象:匹配所有属性。每个属性都有一个定义行为。

{ test: Condition }:匹配特定条件。一般是提供一个正则表达式或正则表达式的数组,但这不是强制的。
{ include: Condition }:匹配特定条件。一般是提供一个字符串或者字符串数组,但这不是强制的。
{ exclude: Condition }:排除特定条件。一般是提供一个字符串或字符串数组,但这不是强制的。
{ and: [Condition] }:必须匹配数组中的所有条件
{ or: [Condition] }:匹配数组中任何一个条件
{ not: [Condition] }:必须排除这个条件

2.4  loader

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或”加载”模块时预处理文件。因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript,或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件!

在 Webpack 里其实只能识别 js,但是实际项目中不可能只用到 js, 像css、sass 和 less 等经常会用到,这个时候就需要 Loader 来解析这些文件,转化成 js,如此 Webpack 就可以识别了

Rule.loader 是 Rule.use: [ { loader } ] 的简写。

2.5  use

传递字符串(如:use: [ “style-loader” ])是 loader 属性的简写方式

(如:use: [ { loader: “style-loader “} ])。

以上列出了常用的关于module的几个功能,想查看具体更多内容,参见官网

module: {
  rules: [
      {
        // 匹配less文件
        test: /\.css$/,
        // 匹配多个文件
        test:[
          /\.less$/,
          /\.css$/
        ],
        // 不会编译 node_modules 目录下的文件
        exclude: path.resolve(__dirname, 'node_modules'),
        // 只编译中src目录里的文件
        include: path.resolve(__dirname, 'src')
         // 匹配类似foo.css?inline的带有?inline的css
        resourceQuery: /inline/,
    },
    {
        // ?cacheDirectory 表示传给 babel-loader 的参数,
        // 用于缓存 babel 编译结果加快重新编译速度
        use: ['babel-loader?cacheDirectory'],
        // 这种方法同上面的方法,当loader需要传入很多参数时
        // 可以使用options对象
        user:[
            {
                loader:'babel-loader', 
                options:{ // 将query形式转换成options对象
                    cacheDirectory:true
                }
            }
        ],
        // 处理顺序为从后到前,即先交给 less-loader 处理,
        // 再把结果交给 css-loader 最后再给 style-loader。
        use: ['style-loader', 'css-loader', 'less-loader'],
        
    },
    {
         // 匹配less文件
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader'],
        //将安照从左往右顺序执行loader。
        enforce: 'pre'
    },
    {
        test: /.css$/,
        //只使用第一个匹配规则
        oneOf: [
            {
             // 匹配类似foo.css?inline的带有?inline的css
                resourceQuery: /inline/,
                use: 'url-loader'
            },
            {
             // 匹配类似foo.css?external的带有?external的css
                resourceQuery: /external/,
                use: 'file-loader'
            }
        ]
    }
  ]
}

 

详细说明参见官方文档

 

 

参考链接:

发表评论

电子邮件地址不会被公开。