webpack优化 -- happypack

Posted 2022-07-17 blogs-xlf

webpack优化 -- happypack

前言：happypack是一个可以开启多线程转换loader的插件，可以在开发环境下提高编译速度，下面用vue-cli 2.x配合happypack优化一下vue项目。??

步骤

下载安装happypack

在本文中，vue-cli是2.x版本的(不是3.0版本)，webpack是3.6.0，happypack是最新的5.0.1。

//安装
npm install happypack -D

改造webpack

找到build/webpack.base.conf.js, 修改module.rules的内容，并添加plugins属性

//修改前
module:
    rules:[
        
            test: /\.vue$/,
            loader: 'vue-loader',
            options: vueLoaderConfig
        ,
        ......
    ]


//修改后
module:
    rules:[
        
            test: /\.vue$/,
            loader: 'happypack/loader?id=vue'
        ,
        ......
    ]
,

//新增的plugins配置
plugins:[
    new HappyPack(
      id:'vue',
      loaders:[
        
          loader:'vue-loader',
          options:vueLoaderConfig  //*
        
      ]
    ),
    ......
]

上面只给出vue的配置，其他的loader改造都是一样的，注意原来在rules里面的options选项要放在new HappyPack里面配置，不然会报错的。

问题

该插件并不完美，目前在处理图片的时候，就有bug,所以目前不建议在处理图片的loader上使用happypack。?? 具体bug请查看