常用Loaders
less-loader, sass-loader
处理样式
url-loader, file-loader
两个都必须用上。否则超过大小限制的图片无法生成到目标文件夹中
babel-loader,babel-preset-es2015,babel-preset-react
js处理,转码
expose?*
eg:
{
test: require.resolve('react'),
loader: 'expose?React'
}
expose-loader
将js模块暴露到全局,如果
常用插件Plugin
config类
NormalModuleReplacementPlugin
匹配resourceRegExp,替换为newResource
ContextReplacementPlugin
替换上下文的插件
IgnorePlugin
不打包匹配文件
PrefetchPlugin
预加载的插件,提高性能
ResolverPlugin
替换上下文的插件
ContextReplacementPlugin
替换上下文的插件
optimize
DedupePlugin
打包的时候删除重复或者相似的文件
MinChunkSizePlugin
把多个小模块进行合并,以减少文件的大小
LimitChunkCountPlugin
限制打包文件的个数
MinChunkSizePlugin
根据chars大小,如果小于设定的最小值,就合并这些小模块,以减少文件的大小
OccurrenceOrderPlugin
根据模块调用次数,给模块分配ids,常被调用的ids分配更短的id,使得ids可预测,降低文件大小,该模块推荐使用
UglifyJsPlugin
压缩js
ngAnnotatePlugin
使用ng-annotate来管理AngularJS的一些依赖
CommonsChunkPlugin
多个 html共用一个js文件(chunk)
dependency injection
DefinePlugin
定义变量,一般用于开发环境log或者全局变量
ProvidePlugin
自动加载模块,当配置($:'jquery')例如当使用$时,自动加载jquery
other
HotModuleReplacementPlugin
模块热替换,如果不在dev-server模式下,需要记录数据,recordPath,生成每个模块的热更新模块
ProgressPlugin
编译进度
NoErrorsPlugin
报错但不退出webpack进程
HtmlWebpackPlugin
生成html
常用alias
alias的配置项目,能够让开发者指定一些模块的引用路径。对一些经常要被import或者require的库,如react,我们最好可以直接指定它们的位置,这样webpack可以省下不少搜索硬盘的时间。
webpack好文推荐:
上面模块只是大概了解,详细可见:http://webpack.github.io/docs/
webpack优化使用:http://www.alloyteam.com/2016...
中文文档:http://zhaoda.net/webpack-han...