Webpack loader rule 命中和结合不同类型样式问题

DebugMi 发布于 2021-08-21阅读：105

之前区分 lazy 样式和普通样式

{
  test: /\.less$/,
  loaders: ['a'],
},
{
  test: /\.lazy\.less$/,
  loaders: ['b'],
}

就可以在代码里 lazy 样式的应用（直接炸）

import styles from "./styles.lazy.less";
styles.use();
styles.unuse();

Webpack loader rule ，如果同时命中 2 个 rule，loaders 会按顺序填入数组组合起来

{
  "loaders": ["a", "b"]
}

想精确命中后立即跳出，可以用 oneOf 嵌套，保证最多只匹配一条

test: /\.less$/,
oneOf: [
  {
    test: /\.less$/,
    loaders: ['a'],
  },
  {
    test: /\.lazy\.less$/,
    loaders: ['b'],
  },
]

已上还是炸，原以为和 loader 执行顺序一样，实际 rule 的执行顺序是从上到下的，调换顺序

test: /\.less$/,
oneOf: [
  {
    test: /\.lazy\.less$/,
    loaders: ['b'],
  },
  {
    test: /\.less$/,
    loaders: ['a'],
  },
]

总结