webpack性能优化

优化打包构建速度 - 开发体验和效率

• 优化babel-loader - 开启缓存，es6代码没有发生改变的部分不会重复打包- 明确范围，使用include或exclude

{
   test:/\.js$/,use:'babel-loader?cacheDirectory=true',// 开启缓存exclude:/node_modules/// 明确范围},

• ignorePlugin避免引入无用模块 直接不引入，代码中没有 比如:

// 默认会引入所有语言的js代码，代码过大。import moment from'moment';

如何只引入中文？

plugins:[// 忽略moment下的/local目录newwebpack.IgnorePlugin({
   resourceRegExp:/^\.\/locale$/,contextRegExp:/moment$/}),]

然后手动引用语言包

moment.locale('zh-cn');

• noParse避免重复打包 引入，但不打包

module:{
   noParse:[/react\.min\.js$/,/vue\.min\.js$/]},

• happyPack - JS单线程，开启多进程打包- 提高构建速度(特别是多核cpu)

module:{
   rules:[{
   test:/\.js$/,// 把对.js文件的处理转交给id为babel的HappyPack实例use:['happypack/loader?id=babel'],include: srcPath,},],},plugins:[newhappypack({
   id: