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

DebugMi 发布于 2021-08-21阅读:114

之前区分 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'],
  },
]

总结

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

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

  • rule 的执行顺序是从上到下的,和 loaders 顺序相反

0