常用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，替换为newResourceContextReplacementPlugin    替换上下文的插件IgnorePlugin    不打包匹配文件PrefetchPlugin    预加载的插件，提高性能ResolverPlugin    替换上下文的插件ContextReplacementPlugin    替换上下文的插件

optimize

DedupePlugin    打包的时候删除重复或者相似的文件MinChunkSizePlugin    把多个小模块进行合并，以减少文件的大小LimitChunkCountPlugin    限制打包文件的个数MinChunkSizePlugin    根据chars大小，如果小于设定的最小值，就合并这些小模块，以减少文件的大小OccurrenceOrderPlugin    根据模块调用次数，给模块分配ids，常被调用的ids分配更短的id，使得ids可预测，降低文件大小，该模块推荐使用UglifyJsPlugin    压缩jsngAnnotatePlugin    使用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好文推荐：[br]上面模块只是大概了解，详细可见：http://webpack.github.io/docs/[br]webpack优化使用：http://www.alloyteam.com/2016/01/webpack-use-optimization/[br]中文文档：http://zhaoda.net/webpack-handbook/loader.html

关键字：webpack, 模块, 上下文, 插件

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！