webpack打包优化技巧
　　优化打包速度:
　　影响打包速度: 文件多、依赖多

　　1、减少文件搜索范畴
　　　　(1) 优化resolve.extensions配置
　　　　　　在导入语句没带文件后缀时，webpack会自动带上后去测验考试询问文件是否存在在配置resolve.extensions时你需要要遵守一下几点,以做到尽可能的优化构建性能:后缀测验考试列表要尽可能的小,不要把项目中不成能存在的情况写到后缀测验考试列表中频率呈现最高的文件后缀要优先放在最前面，，以做到尽快的退出寻找过程在源码中写导入语句时，尽可能的带上后缀，制止寻找过程
　　　　(2)优化resolve.modules配置
　　　　　　resolve.modules 用于配置webpack去哪些目录下寻找第三方模块
　　　　　　resolve.modules 默认值是[‘node_modules‘]，会给与向上递归搜索的方法查找 所以直接设置 绝对路径可以减少搜索法式

　　　　　　function resolve (dir) {
　　　　　　　　return path.join(__dirname, ‘..‘, dir)
　　　　　　}

　　　　　　resolve: {
　　　　　　　　modules: {
　　　　　　　　　　resolve(‘node_modules‘)
　　　　　　　　}
　　　　　　}
　　　　(3)优化resolve.alias 配置
　　　　　　resolve.alias配置项通过别号来把原导入路径映射成一个新的导入路径
　　　　　　使用好的别号可以减少递归操纵
　　　　(4)缩小文件匹配范畴
　　　　　　Include: 需要措置惩罚惩罚的文件的位置
　　　　　　EXclude: 排除不需要措置惩罚惩罚的文件的位置

　　2、设置noParse
　　　　　　modules 中的一个参数
　　　　　　　　防备webpack解析哪些任何与给定正则表达式相匹配的文件，忽略的文件中不应该含有的import require define的挪用,或任何其他导入机制,忽略大型的library可以提高构建性能　　　　　　

　　　　　　　　eg: modules: {

　　　　　　　　　　noParse:/jquery|lodash/

　　　　　　　　}
　　　　　　给babel-loader设置缓存
　　　　　　　　babel-loader供给了cacheDirectory特定选项(默认false)，设置时给定目录将用于缓存加载器的功效
　　　　　　　　use: {
　　　　　　　　　　loader: ‘babel-loader?cacheDirectory=true‘
　　　　　　　　}
　　3、使用happyPack
　　　　基来源根底理:在webpack构建过程中,我们需要使用loader对js,css,图片,字体等文件做转换操纵,并且转换的文件数据量也长短常大的,且这些转换操纵不能并发措置惩罚惩罚文件,而是需要一个个文件进行措置惩罚惩罚happyPack的基来源根底理是将这部分任务分化到多个子进程中并行措置惩罚惩罚,子进程措置惩罚惩罚完成后把功效发送到主进程中,从而减少总的构建时间
　　　　(1)安置:
　　　　　　npm install happypack --save-dev
　　　　(2)配置webpack.common.config.js
　　　　　　引入happyPack
　　　　　　　　const HappPack = require(‘happypack‘)
　　　　　　Rules配置:
　　　　　　　　{
　　　　　　　　　　test: ‘/\.js$/‘,
　　　　　　　　　　exclude: ‘node_module‘,
　　　　　　　　　　loader: ‘happypack/loader?id=happyBabel‘
　　　　　　　　}
　　　　　　plugins配置
　　　　　　　　plugins:{
　　　　　　　　　　new HappyPack({
　　　　　　　　　　　　id: ‘happyBabel‘,
　　　　　　　　　　　　loaders: [
　　　　　　　　　　　　　　{
　　　　　　　　　　　　　　　　loader: [‘babel-loader?cacheDirectory=true‘]
　　　　　　　　　　　　　　}

　　　　　　　　　　　　]
　　　　　　　　　　})
　　　　　　　　}

初探webpack4--简单理解打包优化