webpack常用插件

 https://www.jianshu.com/p/08859e5651fc

 

一、html-webpack-plugin

插件的基本作用就是生成html文件。

html-webpack-plugin的一个实例生成一个html文件,如果单页应用中需要多个页面入口,或者多页应用时配置多个html时,那么就需要实例化该插件多次;

、extract-text-webpack-plugin

该插件会提取entry chunk中所有的require('*.css'),分离出独立的css文件。

 

五、clean-webpack-plugin

用于在building之前删除你以前build过的文件,清楚dist中重复的文件

 

CommonsChunkPlugin    new webpack.optimize.CommonsChunkPlugin(options)

提取代码中的公共模块,然后将公共模块打包到一个独立的文件中,以便在其他的入口和模块中使用。别忘了在html中单独引入抽离出来的公共模块。

常见的使用场景:

  1. 抽离多个entry的公共模块
  2. 抽离vendor模块
  3. 抽离子模块中的公共模块到父模块中,会增加首屏加载的时间
  4. 和3类似,不过不是抽离到父模块,而且额外抽离出一个异步的公共模块
HotModuleReplacementPlugin

模块热替换,如果不在dev-server模式下,需要记录数据,recordPath,生成每个模块的热更新模块。

 

UglifyJsPlugin

压缩js

 

转载于:https://www.cnblogs.com/shucher/p/10518902.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值