4.0的发布,让构建速度提升98%,包体积更小,配置,压缩,更现代化。具体请看https://doc.webpack-china.org/guides/migrating/#-loader
第一步 新增依赖
先安装webpack-cli (用来启动webpack)
pagejson
第二步升级包
以下是主要的依赖包的变动,具体请根据项目情况升级
pagejson
第三步修改配置
mode是 webpack 4 中新增加的参数选项,其有两个可选值:production和development。mode不可缺省,需要二选一第三步修改配置
production模式:
1. 默认提供所有可能的优化,如代码压缩/作用域提升等
2. 不支持watching
3. process.env.NODE_ENV的值不需要再定义,默认是production
pagejson
development模式:
1. 主要优化了增量构建速度和开发体验
2. process.env.NODE_ENV的值不需要再定义,默认是development
3. 开发模式下支持注释和提示,并且支持 eval 下的 source maps
pagejson
4.0变动的配置:
• NoEmitOnErrorsPlugin -> optimization.noEmitOnErrors (生产模式默认)
• ModuleConcatenationPlugin -> optimization.concatenateModules (生产模式默认)
• NamedModulesPlugin -> optimization.namedModules (开发模式默认)。
• 删除了 CommonsChunkPlugin,取而代之的是optimization.splitChunks和optimization.runtimeChunk,这提供了细粒度的缓存策略控制
移除的功能
• 移除了module.loaders
• 移除了loaderContext.options
• 移除了Compilation.notCacheable
• 移除了NoErrorsPlugin
• 移除了Dependency.isEqualResource
• 移除了NewWatchingPlugin
• 移除了CommonsChunkPlugin
以上配置只要完成,就能跑起来,错误日志,基本都是依赖包不支持webpack4.0等错误,一个一个改。
坑点:
因为某些依赖包的不更新支持4.0,会导致无法使用的包有:
1.html-webpack-plugin还没有更新,会出现compilation.templatesPlugin is not a function的错误,目前需要npm i webpack-contrib/html-webpack-plugin -D安装,官方说法是因为作者这段时间没空更新,所以他们自己fork了一份改了,现在先用这种方式用着,等作者有空了再合并进去。
2.url-loader 暂时无法使用,可以用file-loader 完全替代,只是不可用url-loader的转化为base64的功能
3.sass-resources-loader 暂时无更新,无法使用sass的全局变量。具体到每个文件必须用@import ‘...’
文 / Mob 高炀
ShareSDK 轻松实现社会化功能,以其强大的 App 社交分享功能深受开发者熟知和好评;
SMSSDK 可快速集成短信验证功能,帮助开发者打通手机通讯录好友的社交圈;
MobLink 打破了 App 孤岛,实现了 Web 与 App 的无缝链接,新用户在首次打开 App 时,大大提高用户转化率;
Mob统计分析 用数据驱动产品,精准化行为分析 + 多维数据模型 + 匹配全网标签 + 垂直行业分析顾问;
MobPush 快速集成推送服务,应对多样化推送场景;
BBSSDK 是 Discuz 论坛移动化解决方案,同步 Discuz 论坛数据实现论坛移动化;
ShareREC 手游录像分享则是 ShareSDK 图文分享的延伸,可为手游实现边玩边录的功能,以此提升玩家黏度并有效促进推广;
MobAPI 为开发者提供各种所需的原始数据及稳定的 API SERVICE,也免去了自己收集数据的繁琐步骤;
MobPay 多种主流支付渠道可一键接入,满足企业多样化需求;
ShopSDK 2小时快速搭建您的商城系统,商品管理 - 订单交易 - 售后退款 - 整套解决方案,丰富您APP的应用场景;
MobIM 为开发者提供即时通讯的消息通道服务,专注于保障通讯的安全稳定可靠,支持开发者使用App的自有用户系统,或第三方用户系统;
截止 2017 年 12 月,Mob 开发者服务平台全球设备覆盖超过 76 亿,SDK下载量超过 318 万次,服务超过 36 万款移动应用。
閱讀更多 Mob開發者服務平臺 的文章