缩小文件搜索范围

webpack启动后会从配置的Entry出发，解析出文件中的导入语句，再递归的解析。在遇到导入语句时，webpack会做两件事情：

• 根据导入语句去寻找对应的要导入的文件。
• 根据找到的要导入文件的后缀，使用配置中的loader去处理文件。

以上两件事情虽然对于处理一个文件非常快，但是当项目大了以后文件量会变的非常多，这时候构建速度会很慢。所以我们要去优化相关配置。

优化loader配置

由于loader对文件的转换操作很耗时，需要让尽可能少的文件被loader处理。可以通过include去命中只有哪些文件被处理。也可以通过exclude去排除哪些文件不被处理。

举个栗子

module.exports = {
  module: {
    rules: [
      {
        // 如果项目源码中只有 js 文件就不要写成 /\.jsx?$/，提升正则表达式性能
        test: /\.js$/,
        // babel-loader 支持缓存转换出的结果，通过 cacheDirectory 选项开启
        use: ['babel-loader?cacheDirectory'],
        // 只对项目根目录下的 src 目录中的文件采用 babel-loader
+       include: path.resolve(__dirname, 'src'),
        // 排除node_modules下的文件
+                exclude: /node_modules/
      },
    ]
  },
};