Webpack 3.X-4.X升级记录

4.0的发布,让构建速度提升98%,包体积更小,配置,压缩,更现代化。具体请看https://doc.webpack-china.org/guides/migrating/#-loader


Webpack 3.X-4.X升级记录

第一步 新增依赖

先安装webpack-cli (用来启动webpack)

pagejson

Webpack 3.X-4.X升级记录

第二步升级包

以下是主要的依赖包的变动,具体请根据项目情况升级

pagejson

Webpack 3.X-4.X升级记录

第三步修改配置

mode是 webpack 4 中新增加的参数选项,其有两个可选值:production和development。mode不可缺省,需要二选一第三步修改配置

production模式:

1. 默认提供所有可能的优化,如代码压缩/作用域提升等

2. 不支持watching

3. process.env.NODE_ENV的值不需要再定义,默认是production

pagejson

Webpack 3.X-4.X升级记录

development模式:

1. 主要优化了增量构建速度和开发体验

2. process.env.NODE_ENV的值不需要再定义,默认是development

3. 开发模式下支持注释和提示,并且支持 eval 下的 source maps

pagejson

Webpack 3.X-4.X升级记录

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 高炀

Webpack 3.X-4.X升级记录

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 万款移动应用。


分享到:


相關文章: