loader配置优化

webpack每次遇到一个资源的时候就需要扫描所有的loader，查看那些loader可以处理这个资源，但是我们发现有几点可以优化：

loader的匹配范围，比如node_modules下的就直接排除掉
loader太多了，想办法出去一些重复项的loader

oneOf

前面已经讲了很多的loader，但是有些loader是相互多余的，比如less的和css就显得多余：

const rules =[
  {
    // 都是 不同的 文件后缀，一次匹配肯定只能匹配到一个
    oneOf: [
      {
        test: /\.css$/
        ...xxxConfig,
      },
      {
        test: /\.less$/
        ...xxxConfig,
      },
      {
        test: /\.sass$/
        ...xxxConfig,
      },
      {
        test: /\.js$/
        ...xxxConfig,
      }
    ]
  },
  // 需要注意的是，如果是相同的后缀，或者是包含关系，看情况需要是否分离出来
  {
    test: /\.js$/
    ...xxxOtherConfig, 
  }
]

module.exports = {
  module: {
    rules
  }
}

oneOf内的所有loader，只匹配一次

enforce

在oneOf里我们发现，同样是js有两个loader，那怎么觉得他们的先后顺序呢？

let rules ={
  ...rules,
  {
    test: /\.js$/,
    use: 'loader-center',
  },
  {
    test: /\.js$/,
    use: 'loader-after',
    enforce: 'post' // 后置
  },
  {
    test: /\.js$/,
    use: 'loader-pre',
    enforce: 'pre' // 前置
  }
}

12-loader配置优化

loader配置优化

oneOf

enforce