webpack优化 -- happypack
Posted blogs-xlf
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack优化 -- happypack相关的知识,希望对你有一定的参考价值。
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请查看
以上是关于webpack优化 -- happypack的主要内容,如果未能解决你的问题,请参考以下文章