看了官方的升级通告,据说webpack4的打包效率提升近一倍,于是最近在项目分支上升级了下webpack4,过程中的一些报错及问题简单整理下,以供交流。

在之前的旧项目上单纯的升级webpack版本后,控制台会逐个出现以下系列问题,需要逐个修改:

1、首先是关于CommonsChunkPlugin的报错

CommonsChunkPlugin在webpack4中已被移除,是被移除的四个常用plugin之一(UglifyjsWebpackPlugin,CommonsChunkPlugin,ModuleConcatenationPlugin,NoEmitOnErrorsPlugin),改用optimization.splitChunks和optimization.runtimeChunk替代。

2、无法识别ts文件导致的报错(error:'app.module.ts is not a module'   ||   'you may need an appropriate loader to handle this file type'),如图

这里的问题是由于webpack的配置文件中关于ts-loader的语法问题导致,修改成如下的语法即可


module: {
rules: [
{test: /\.tsx?$/,loaders: ['ts-loader']}
]
}

3、webpack.optimize.UglifyJsPlugin has been removed,如图

webpack4基于零配置的思想,部分插件被移除,如webpack.optimize.UglifyJsPlugin在webpack4中已经被移除,在optimization对象中配置optimization.minimize=true即可,如果是生产环境的模式(mode:production)下,则该属性默认为true,默认压缩。

4、webpack.NoErrorsPlugin is not a constructor,具体error如图

该过滤error的插件需修改如下


new webpack.NoEmitOnErrorsPlugin(),

5、45:15-36 Critical dependency: the request of a dependency is an expression

解决warning,需在plugins中添加以下插件代码


// Workaround for angular/angular#11580
new webpack.ContextReplacementPlugin(
/angular(\\|\/)core/,
path.resolve(__dirname, './')
),

此处需要使用上下文替换插件进行相关规则的替换,详见angular&webpack简介ContextReplacementPlugin

6、System.import() is deprecated and will be removed soon. Use import() instead.

这个warning目前没有找到@angular/core版本的解决方案,warning的产生应该是angular/core源码中使用了webpack中即将删除的方法system.import,希望有这个warning解决方案的朋友告知下,谢谢哈

7、如果项目配置的是动态路由模式,webpack4中默认会生成类似0.js、1.js、2.js...这样的默认模块名称。

如果需要语义化模块名称,需要在两处进行配置:

1、在动态路由下的require.ensure方法里配置(这里项目使用的是react-router,所以就以此为参考说明),require.ensure方法参数说明如下图1,图2即具体模块名称的配置

图1

图2

2、在webpack.config的output中需要开启自定义的模块名称chunkFilename定义

然后build打包后,会发现bundule文件中就会出现刚才配置的模块名称“login”

end

webpack4试水总结的更多相关文章

  1. POJ 2502 - Subway Dijkstra堆优化试水

    做这道题的动机就是想练习一下堆的应用,顺便补一下好久没看的图论算法. Dijkstra算法概述 //从0出发的单源最短路 dis[][] = {INF} ReadMap(dis); for i = 0 ...

  2. 大众点评试水O2O新模式:实体店试穿,扫描二维码付款 现场取货

    在餐饮美食行业取得不错的成绩之后,大众点评将触角延伸到了线下的传统商铺,开始涉足线下商品的 O2O 团购.和传统的线上下单,线下消费的 O2O 模式不同.大众点评的 O2O 团购用户,可在店内试穿后通 ...

  3. Json.Net6.0入门学习试水篇

    原文:Json.Net6.0入门学习试水篇 前言 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.简单地说,JSON 可以将 JavaScript 对象中 ...

  4. 第一回:Scrapy的试水

    前言:今天算是见到Scrapy的第二天,之前只是偶尔查了查,对于这个框架的各种解释,我-----都-----看------不------懂----,没办法,见面就是刚. 目的:如题,试水 目标:< ...

  5. CSharpGL(49)试水OpenGL软实现

    CSharpGL(49)试水OpenGL软实现 CSharpGL迎来了第49篇.本篇内容是用C#编写一个OpenGL的软实现.暂且将其命名为SoftGL. 目前已经实现了由Vertex Shader和 ...

  6. UITableView(自定义cell)试水心得

    初次试水自定义cell的UITableView 实现目标      最终实现结果   界面复原度:98% 未能完全复刻的地方:下半部分的tableview与头部的控件间距上的误差 原因:在做table ...

  7. 微博试水卖车社交电商怎样令4S“颤抖”?

        微博对社交电商的探索一直在深入,年初.微博上线了"支付"产品.从而使社交产业链实现了闭环,随后,微博又尝试售卖多种商品,不断扩大移动电商的试水范围,近期微博大规模汽车销售收 ...

  8. phaser2->3:来个打地鼠试水

    本文中phaser具体版本 phaser2:2.8.1 phaser3:3.17.0 一.实现效果二.实现细节三.项目总结四.参考文档 一.实现效果 源码地址(phaser2&phaser3) ...

  9. CentOS7 docker试水

    CentOS 7.0,无外网直接访问权限,有一台代理服务器. 首先安装docker-ce,参考http://blog.51cto.com/aaronsa/2056882 除非特殊说明,以下操作都用ro ...

随机推荐

  1. 摘自(http://www.ruanyifeng.com/blog/2011/07/linux_load_average_explained.html)

    理解Linux系统负荷   作者: 阮一峰 一.查看系统负荷 如果你的电脑很慢,你或许想查看一下,它的工作量是否太大了. 在Linux系统中,我们一般使用uptime命令查看(w命令和top命令也行) ...

  2. uva1411 最小值转最大值+二分图匹配

    这题给了n个白点和n个黑点坐标,计算出他们两两配对的总路程最少, 我们算出他们之间的距离,为d,然后 w[j][i]=-d; 就将求最小值转化为求最大值,然后采用km进行匹配计算 #include & ...

  3. ac1066

    经过分析后的二分 题目是 Josnch星球是一个赌博之风盛行的星球.每个人一出生就有一定数额的钱,之后的所有收入只能由赌博获得(OMG,如果RP不好,输光了所有的 钱...)假设赌博公司的某场赌博有N ...

  4. 缓存(图像 IO 14.2)

    缓存 如果有很多张图片要显示,最好不要提前把所有都加载进来,而是应该当移出屏幕之后立刻销毁.通过选择性的缓存,你就可以避免来回滚动时图片重复性的加载了. 缓存其实很简单:就是存储昂贵计算后的结果(或者 ...

  5. mustache多次渲染和多个赋值

    mustache多次渲染和多个赋值, html页面的script标签中的代码,设置多个键: <!-- 项目列表 --> <script type="text/x-templ ...

  6. 一起学koa

    gitbook地址 http://17koa.com/koa-generator-examples/

  7. Web前端学习笔记之安装和使用PhantomJS

    0x00 安装PhantomJS(linux环境安装) 将PhantomJS下载在/usr/local/src/packet/目录下(这个看个人喜好) 操作系统:CentOS 7 64-bit 1.下 ...

  8. python no module named 'win32api'

    在cmd下执行 pip install pypiwin32api   即可

  9. Linux下Tomcat端口、进程以及防火墙设置

     Linux下Tomcat端口.进程以及防火墙设置 1,查看tomcat进程: #ps -aux | grep tomcat(或者ps -ef | grep tomcat都行) 可以看到现在运行着两个 ...

  10. 20145105 《Java程序设计》第9周学习总结

    20145105 <Java程序设计>第9周学习总结 教材学习内容总结 第十六章 整合数据库 一.JDBC入门 (一)JDBC简介 厂商在操作JDBC驱动程序时,依操作方式可将驱动程序分为 ...