• [webpack]——loader配置


    前言

      当我们需要配置 loader 时,都是在 module.rules 中添加新的配置项,在该字段中,每一项被视为一条匹配使用 loader 的规则。

    看一下基础实例:

    module.exports = {
      // ...
      module: {
        rules: [ 
          {
            test: /.jsx?/, // 条件
            include: [ 
              path.resolve(__dirname, 'src'),
            ], // 条件
            use: 'babel-loader', // 规则应用结果
          }, // 一个 object 即一条规则
          // ...
        ],
      },
    }

    loader 的匹配规则中有两个最关键的因素:一个是匹配条件一个是匹配规则后的应用

    接下来对一些关键字解析一下啦~

    规则条件配置

    • { test: ... } 匹配特定条件
    • { include: ... } 匹配特定路径
    • { exclude: ... } 排除特定路径
    • { and: [...] }必须匹配数组中所有条件
    • { or: [...] } 匹配数组中任意一个条件
    • { not: [...] } 排除匹配数组中所有条件

    也就可以是以下的理解

    1. 字符串:必须以提供的字符串开始,所以是字符串的话,这里我们需要提供绝对路径
    2. 正则表达式:调用正则的 test 方法来判断匹配
    3. 函数:(path) => boolean,返回 true 表示匹配
    4. 数组:至少包含一个条件的数组
    5. 对象:匹配所有属性值的条件
    简单的例子理解一下

    rules: [ { test: /.jsx?/, // 正则 include: [ path.resolve(__dirname, 'src'), // 字符串,注意是绝对路径 ], // 数组 // ... }, { test: { js: /.js/, jsx: /.jsx/, }, // 对象,不建议使用 not: [ (value) => { /* ... */ return true; }, // 函数,通常需要高度自定义时才会使用 ], }, ],

    嘿哈,以上的配置差不多很日常了,再说一个官方例子

    module.rules 允许你在 webpack 配置中指定多个 loader。 这是展示 loader 的一种简明方式,并且有助于使代码变得简洁。同时让你对各个 loader 有个全局概览:

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

    module type

    {
      test: /.js/,
      include: [
        path.resolve(__dirname, 'src'),
      ],
      type: 'javascript/esm', // 这里指定模块类型
    },

    上述做法是可以帮助你规范整个项目的模块系统,但是如果遗留太多不同类型的模块代码时,建议还是直接使用默认的 javascript/auto

    后言

      想了解更多的可以认真读一遍官方文档

      官方链接:https://webpack.docschina.org/concepts/loaders/

  • 相关阅读:
    JavaScript常见注意点(一)
    jspServlet2.5和Servlet3的区别
    jspMVC案例
    jQuery入口函数的写法
    Servlet 简介
    jspMVC设计模式和Servlet2.5入门案例
    display 属性
    JSON简单使用
    Tomcat修改端口号
    php开发环境简单配置
  • 原文地址:https://www.cnblogs.com/ifannie/p/9209599.html
Copyright © 2020-2023  润新知