美文网首页
Webpack 5(六)Loader

Webpack 5(六)Loader

作者: _于曼丽_ | 来源:发表于2023-10-19 09:11 被阅读0次

    什么是 loader

    loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。

    本质上,webpack loader 将所有类型的文件,转换为应用程序的依赖图(和最终的 chunk)可以直接引用的模块。

    使用 loader

    在你的应用程序中,有三种使用 loader 的方式:

    配置(推荐):在 webpack.config.js 文件中指定 loader

    module: {
      rules: [
        {       
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        }              
      ]
    }
    

    内联:在每个 import 语句中显式指定 loader

    import Styles from 'style-loader!css-loader?modules!./styles.css';
    

    CLI:在 shell 命令中指定它们

    webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'
    

    loader 的路径解析

    loader 可以是绝对路径、相对路径,也可以是模块路径,相对路径相对于 context 选项(该选项默认值为配置文件所在的目录),模块路径采用模块解析规则。一般 loader 都是通过 npm 安装到 node_modules 目录中,因此一般都是通过模块路径来引用 loader。

    module.exports = {
      context: path.resolve(__dirname),
      module: {
        rules: [
          {
            test: /\.css$/,
            use: ['./node_modules/style-loader', 'css-loader']
          }
        ]
      }
    }
    

    module.rules

    module: {
      rules: [
        {
          test: /\.css$/,
          use: [MiniCssExtractPlugin.loader, 'css-loader']
        },
        {
          test: /\.js$/,
          include: [
              path.resolve(__dirname, 'src')
          ],
          exclude: [
              path.resolve(__dirname, 'src/node_modules'),
              path.resolve(__dirname, 'src/libs')
          ]
        }
      ]
    }
    

    匹配规则

    module.rules 是匹配规则数组,数组中的每一项为一条匹配规则对象,以下称为 rule。每条 rule 包括匹配条件和匹配结果。

    对于依赖图中的每个模块的绝对路径,都按照 module.rules 中的 rule 依次进行匹配。如果模块的绝对路径满足某个 rule 的匹配条件,则对该模块应用该 rule 的 匹配结果中指定的 loader 进行预处理。? 如果模块路径满足多个 rule 的匹配条件 ?

    匹配条件

    匹配条件包括 test include exclude 选项,每个选项为一个匹配条件,选项的值可以是:

    • 字符串:字符串的值一般为绝对路径。如果模块的绝对路径以该字符串开头,则满足该条匹配条件。
    • 正则表达式:如果模块的绝对路径 url.test(reg) 返回 true,则满足该条匹配条件。
    • 数组:数组元素为字符串或正则表达式,每个元素为一个匹配条件,至少需要满足一个匹配条件。

    如果某个 rule 同时有多个匹配条件选项,则模块的绝对路径必须同时满足所有的匹配条件,才会对模块应用匹配结果。test 和 include 具有相同的作用,都是必须匹配选项。exclude 是必不匹配选项(优先于 test 和 include)。

    最佳实践:

    • 只在 test 中使用正则表达式。
    • 在 include 和 exclude 中使用绝对路径数组。
    • 尽量避免 exclude,更倾向于使用 include。

    实例:

    {
        test: /\.js$/,
        include: [
            path.resolve(__dirname, 'src')
        ],
        exclude: [
            path.resolve(__dirname, 'src/node_modules'),
            path.resolve(__dirname, 'src/libs')
        ]
    }
    

    以上代码为一条 rule,如果某个模块不在 ./src/node_modules/./src/libs/ 目录下,并且在 ./src/ 目录下,并且模块名以 .js 结尾,则满足该条 rule 的匹配条件。

    匹配结果

    匹配结果包括 use 选项,指定应用的 loader,选项的值可以是:

    • 字符串
    • 对象
    • 数组:数组元素为字符串或对象,从后往前应用 loader

    实例:

    module: {
      rules: [
        {
          test: /\.js$/,
          use: 'babel-loader'
        },
        
        {
          test: /\.(jpe?g|png|gif)$/,
          use: {
            loader: 'file-loader',
            options: {...}
          }
        },
        
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader',
            {
              loader: 'postcss-loader',
              options: {...}
            }
          ]
        }
      ]
    }
    

    先对 css 文件应用 css-loader,再应用 style-loader,css-loader 的输出作为 style-loader 的输入。

    相关文章

      网友评论

          本文标题:Webpack 5(六)Loader

          本文链接:https://www.haomeiwen.com/subject/ebgfidtx.html