升级 webpack4踩坑集

  1. 很多参数进行了更改, 而新版 webpack 加入了类型检测, 类型不对会导致报错

在node_modules/webpack/declarations/WebpackOption.d.ts下寻找正确的参数与其类型

  1. inline-chunk-manifest-html-webpack-plugin报错
Error: Plugin could not be registered at 'html-webpack-plugin-alter-asset-tags'. Hook was not found.
BREAKING CHANGE: There need to exist a hook at 'this.hooks'. To create a compatibility layer for this hook,hook into 'this._pluginCompat'.
  at Compilation.plugin (/Users/pineapple/code/CodemaoM/node_modules/webpack/node_modules/tapable/lib/Tapable.js:69:9)
  at Compilation.deprecated [as plugin] (internal/util.js:47:15)
  at compiler.plugin.compilation (/Users/pineapple/code/CodemaoM/node_modules/inline-chunk-manifest-html-webpack-plugin/src/index.js:63:19)

暂时先删掉, 似乎是因为html-wepback-plugins 与 webpack4之间的版本号问题, 此插件的作用好像是把 manifest.json 插入到 html 的头部, 看一下能不能用配置模拟一下

  1. 引入 json 报错

因为 webpack^2 已经添加了引入 json格式文件, 因此不需要 json-loader(此插件也无法更新)
但是配置中依然有将 json 文件交给 happypack 打包 然后用 json-loader 来加载的不正确配置
因此删掉即可

  1. development 环境下webpack4 打包速度过慢

webpack config 中optimization.runtimeChunk 设为 true
升级 html-webpack-plugin到 beta 版
升级 ts-loader, loader 增加参数 transpileOnly: true, experimentalWatchApi: true,
(途中曾经试过升级 node 版本(8.11.x -> 11.x), 结果更慢了 = =|||)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 早上7点40起床和爱人一起去公司,上午9点约郑律师来店里沟通劳动法和合同法。感受到一个老板想把公司管理好,必须要懂...
    31c47a10aded阅读 182评论 1 0
  • 忌哥我前几天接到一个来自国美的电话,问我是不是在它家看过电器。 在我说没有后,对方说我家是不是在XXXX小区,需不...
    装无忌阅读 744评论 0 0
  • “弘农贡”是个香油的牌子, 因为包装的问题, 致使我曾一度的愤怒。 你好:你应该是《弘农贡》牌香油的厂家吧?我不幸...
    风儿也温柔阅读 4,761评论 39 120
  • 虽然早已收到老师发的信息说今天早上不升旗了,可也还是早早的就把俩宝送去学校了。 昨天晚上俩宝又因为手机发生了争吵,...
    恬静_799a阅读 132评论 0 1