Webpack实现按需打包Lodash的几种方法详解
前言
在数据操作时，Lodash就是我的弹药库，不管遇到多复杂的数据结构都能用一些函数轻松拆解。
ES6中也新增了诸多新的对象函数，一些简单的项目中ES6就足够使用了，但还是会有例外的情况引用了少数的Lodash函数。一个完整的Lodash库，即使是压缩后，现最新版本也有71k的体积。不能为了吃一口饭而买下一个饭店啊。
针对这个问题，其实已经有很多可选方案了。
函数模块
Lodash中的每个函数在NPM都有一个单独的发布模块。NPM:resultsfor‘lodash'
假如你只需要使用_.isEqual，那么你只需要安装lodash.isequal模块，然后按以下方式引用。
varisEqual=require('lodash.isequal')
//orES6
importisEqualfrom'lodash.isequal'
isEqual([1,2,3],[1,2,3])//true
全路径引用
在你完整安装Lodash后，可以按lodash/函数名的格式单独引入需要的函数模块。
vardifference=require('lodash/difference')
//orES6
importdifferencefrom'lodash/difference'
difference([1,2],[1,3])//[2]
使用插件优化
在简单场景下，以上两种方式足以解决问题。
而遇到复杂的数据对象时，我们不得不在一个文件中引入多个Lodash函数，这样就需要在文件中写多个require或import相关函数。
importremovefrom'lodash/remove' importuniqfrom'lodash/uniq' importinvokeMapfrom'lodash/invokeMap' importsortByfrom'lodash/sortBy' //more...
正写到关键处却因为引入一个函数要拉到文件头部去定义引用而打乱了思路，很不爽！
于是我机智的到Github去搜索了webpack和lodash两个关键词的组合，排在首位的lodash-webpack-plugin就是为了解决这个问题而生。
使用时需要以下模块，其实除了前两个剩下的一般都已安装了：
$npmi-Slodash-webpack-pluginbabel-plugin-lodashbabel-corebabel-loaderbabel-preset-es2015webpack
配置：
webpack.config.js
varLodashModuleReplacementPlugin=require('lodash-webpack-plugin');
varwebpack=require('webpack');
module.exports={
module:{
loaders:[{
loader:'babel',
test:/\.js$/,
exclude:/node_modules/,
query:{
plugins:['transform-runtime','lodash'],
presets:['es2015']
}
}]
},
plugins:[
newLodashModuleReplacementPlugin,
newwebpack.optimize.OccurrenceOrderPlugin,
newwebpack.optimize.UglifyJsPlugin
]
}
其中babel-plugin-lodash的配置，也就是plugins:['lodash']，并不是一定要在loaders中，也可以单独定义babel。
webpack.config.js
varLodashModuleReplacementPlugin=require('lodash-webpack-plugin');
varwebpack=require('webpack');
module.exports={
module:{
loaders:[{
loader:'babel',
test:/\.js$/,
exclude:/node_modules/
}]
},
babel:{
presets:['es2015'],
plugins:['transform-runtime','lodash']
},
plugins:[
newLodashModuleReplacementPlugin,
newwebpack.optimize.OccurrenceOrderPlugin,
newwebpack.optimize.UglifyJsPlugin
]
}
又或者是.babelrc文件中。
以上工作完成了，在每个你需要使用lodash函数的文件中只需要引用一次lodash，即可调用任意函数而不会造成完全打包。
import_from'lodash' _.add(1,2)//打包时只会引入这一个函数模块
注意：必须要使用ES2015的模块引用方式才有效。
以上即是我目前所知道的几种方式，如果哪位朋友有更好的方式（比如只需要全局引入一次），请一定分享与我!
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。