Webpack优化

缩小文件的搜索范围：

Webpack在启动后会从配置的Entry出发，解析出文件中的导入语句，再递归解析。

在遇到导入语句时，Webpack会做以下两件事：

1. 根据导入语句去寻找对应的要导入的文件。（例如：require(‘react’)导入语句对应的文件是./node_modules/react/react.js）
2. 根据找到的要导入的文件的后缀，使用配置中的Loader去处理文件。（例如：使用ES6开发的JS文件需要使用babel-loader处理）

虽然以上两件事对于处理一个文件来说非常快，但是在项目大了以后文件量会变得非常大，这时构建速度慢的问题就会暴露出来，可以通过以下途径优化：

优化Loader配置：

由于Loader对文件的转换操作很耗时，所以可以通过test、include、exclude三个配置项来命中Loader要应用规则的文件，尽可能少地让文件被Loader处理。

以采用ES6的项目为例，在配置babel-loader时可以

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

优化resolve.modules配置：

resolve.modules用于配置Webpack去哪些目录下寻找第三方模块。默认值是[‘node_modules’]，含义是先去当前目录的./node_modules目录下去找想找的模块，如果没找到，就去上一级目录…/node_modules中找，再没有就去…/…/node_modules中找，以此类推。

当安装的第三方模块都放在项目根目录的./node_modules目录下时，就没有必要按照默认的方式去一层层寻找，可以指明存放第三方模块的绝对路径，以减少搜索步骤。配置如下：

module.exports = {
	resolve:{
		//__dirname表示项目根目录
		modules:[path.resolve(__dirname,'node_modules')]
	}
}

使用HappyPack：