webpack3升级到webpack4遇到问题总结

最近由于项目需要，需要对已有的两个vue项目进行webpack3升级到webpack4，此处记录一下整个升级过程的几个重要步骤，以及遇到的问题和解决方案。

1、更新webpack以及相关联插件，webpack4新增插件webpack-cli

npm i -D webpack webpack-cli webpack-dev-server webpack-merge

2、运行npm run dev，报错：Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

原因：webpack.optimize.CommonsChunkPlugin 已废弃，修改为webpack.optimize.SplitChunksPlugin

3、运行报错：Error: Plugin could not be registered at 'html-webpack-plugin-before-html-processing'. Hook was not found.

原因：webpack升级，html-webpack-plugin未匹配

解决方案：升级html-webpack-plugin插件

升级插件到 html-webpack-plugin: “^3.2.0”版本，再次运行，报错

原因：项目中自定义由于需要，需要对每一个打包好的html模版都插入一段js，所以基于html-webpack-plugin自定义了一段插件代码，但是该代码需要根据webpack4重新处理一下，参考官网：https://github.com/jantimon/h...

解决：

第一步：升级插件 npm i -D html-webpack-plugin@next；
第二部修改自定义代码部分，如图：

4、运行报错：Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

原因：Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead.

解决： npm install extract-text-webpack-plugin@next；

只更新extract-text-webpack-plugin可能没用，最好更新成mini-css-extract-plugin,具体可看第6步

5、报错：TypeError: Cannot read property 'vue' of undefined

原因：更新webpack，未更新vue-loader

解决：npm i -D vue-loader

注意：webpack4需要在配置中加入插件的引用才会生效

const VueLoaderPlugin = require('vue-loader/lib/plugin');
//配置中加入
plugins: [
  new VueLoaderPlugin()
],

6、报错

切换为mini-css-extract-plugin

7、视情况更新

"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.10”,
"html-webpack-exclude-assets-plugin": "0.0.7",
"html-webpack-inline-chunk-plugin": "^1.1.1",

8、删除

在配置中加入

9、BaseClient.js?e917:12 Uncaught TypeError: Cannot assign to read only property 'exports' of object ‘#
npm run dev不报错，但是在浏览器打开，控制台报错

原因，webpack4之后，不允许混用 exports和import

解决: 修改include部分为下边这样

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 记一次webpack3升级webpack4的踩坑经历

    webpack4版本也出了很久了 之前弄过一段时间的升级 后面因为种种原因搁浅了 今天有硬着头皮升级了一波 yeah 还好升级成功了 先贴一波原先webpack3的github配置 ps(我只是一个菜鸡= = webpack的配置很辣鸡 )废话少说 开撸 1 webpack升级到4.0版本并且安装webpack-cli yarn add webpack-cli global<br>yarn add webpack-cli -D 如果不对webpack-cli进行安装的话会报错 如下: The

  • Vue项目从webpack3.x升级webpack4不完全指南

    前段时间,泡面将自己的一个Vue-cli构建的前端框架从webpack3.x升级到了4.x版本,现在才拉出来记录一下,已备忘之用,也和大家分享一下,以免大家采坑. 原先的环境 项目原先通过Vue-cli 2.9.3 版本构建,原先使用的webpack 3.x版本 首先需要对基础包进行更新(package.json) webpack 更新到4.x版本,泡面这里更新到了4.28.3 更新webpack-dev-server,泡面更新到了3.1.14版本, 安装webpack-cli,泡面安装的是3.

  • 详解webpack4升级指南以及从webpack3.x迁移

    详解webpack4升级指南以及从webpack3.x迁移

    几天前webpack发布了新版本v4.0.0,其中做了很多改动,包括0配置以及移除了CommonsChunkPlugin等.由此而来的还有之前webpack3.x的项目如何迁移到新的webpack版本,本文就一个新的vue-cli创建的基于webpack的项目进行迁移. 题外话:不要看0配置是很有噱头,基本是不能满足大部分用户啊的需求,不过加入了更多的默认配置确实也方便了用户,配置相对简单,是一种开箱即用的方式.毕竟之前parcel的0配置确实抢了很多webpack的风头,然后也去弄了一下par

  • webpack3升级到webpack4遇到问题总结

    最近由于项目需要,需要对已有的两个vue项目进行webpack3升级到webpack4,此处记录一下整个升级过程的几个重要步骤,以及遇到的问题和解决方案. 1.更新webpack以及相关联插件,webpack4新增插件webpack-cli npm i -D webpack webpack-cli webpack-dev-server webpack-merge 2.运行npm run dev,报错:Error: webpack.optimize.CommonsChunkPlugin has b

  • webpack3.0升级4.0的方法步骤

    1.webpack 3.11升级4.26 为了提升打包效率,在webpack3.11基础之上做了升级,webpack4.0发布以来,零配置的webpack对项目本身提供的"打包"和"压缩"功能已经做了优化,如果在项目开始使用4.0而不用vue-cli的默认配置,遇到的问题或许能少一些. 2. 安装/升级依赖 这些依赖有的是在build过程中发现依赖有新的替换或者报错,逐步替换的,如果想遇到多个坑,可以先把webpack.webpack-cli升级到对应版本 devD

  • 快速将Vue项目升级到webpack3的方法步骤

    快速将Vue项目升级到webpack3的方法步骤

    前言 由于 webpack3升级后,新增了 Scope Hositing(作用域提升) 功能,据说是对 js的性能提升很大.因此,我们做了一个测试对比,就是 webpack3和 webpack1/2 的性能对比,如下: 测试目标 以下数据是2天随机时段3部手机各2组数据,每组数据都是30次取平均值,为了测试js的解析能力,排除了网络请求的影响 平台:M5 Note Build/MRA58K 系统:android 6.0 时间 before after 2017-08-10 13:00 920 5

  • webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法

    批处理 前端现在在做项目的时候大多数遇到的都是单页面应用,但有时需要做多页面的时候,会把单页拿过来修改成多页面,如果代码多了,对单页或多页的配置可能会混乱,那么有没有更好的方式能把单页面和多页面不同的配置代码分开,能更清楚的分辩他们的区别,这里是利用 批处理 对前端构建进行部署 git地址目录分为三块 single //单页代码 share // 共用代码 many //多页代码 只需要用到 批处理 对其中两者进行合并就能生成想要的单页或多页应用,提示需要安装国内的 npm淘宝镜像 如果未安装的

  • 详解多页应用 Webpack4 配置优化与踩坑记录

    前言 最近新起了一个多页项目,之前都未使用 webpack4,于是准备上手实践一下.这篇文章主要就是一些配置介绍,对于正准备使用 webpack4 的同学,可以做一些参考. webpack4 相比之前的 2 与 3,改变很大.最主要的一点是很多配置已经内置,使得 webpack 能"开箱即用".当然这个开箱即用不可能满足所有情况,但是很多以往的配置,其实可以不用了.比如在之前,压缩混淆代码,需要增加uglify插件,作用域提升(scope hosting)需要增加ModuleConca

  • vue-cli3+ts+webpack实现多入口多出口功能

    最近公司有一个需求,需要在项目里面嵌套h5的页面,而且不止有一个嵌套的页面,那么就想办法运用webpack的多入口多出口的打包模式,网上查了很多资料,也有多入口多出口的案例,github上也有相应源码,我就不做过多讲解了.这里把博客贴出来vue多入口多出口打包,相应的多入口多出口的源码在 这里 .使用的是vue2.x + webpack3.x集成的多入口多出口,感兴趣的小伙伴可以看看. 然而,公司领导要求项目里面集成ts进行开发,对于字段的类型有更好的控制,所以在配合多入口多出口的前提下,还要配

  • 详解基于vue-cli优化的webpack配置

    最近的项目度过了开始忙碌的基建期,也慢慢轻松下来,准备记录一下自己最近webpack优化的措施,希望有温故知新的效果. 项目采用的是vue全家桶,构建配置都是基于vue-cli去改进的.关于原始webpack配置大家可以看下这篇文章vue-cli#2.0 webpack配置分析,文章基本对于文件每行代码都做了详细的解释,有助于更好的理解webpack. 仔细总结了一下,自己的优化基本还是网上流传的那几点 通过 externals 配置来提取常用库,引用cdn 合理配置CommonsChunkPl

  • vue-cli3使用 DllPlugin 实现预编译提升构建速度

    在项目打包上有两个目标:减少打包代码体积和加快打包速度 1. 减少打包体积: (1)对于用的比较少的库,可以去掉(我去掉了jquery以及lodash),用到的地方,参考源码自己写 (2)非用不可的又比较大的库(我这里用了monaco-edit),使用cdn方式引入 打包体积减少的情况下,自然速度也会有所提升 2. 加快打包速度: 我目前做了这些: (1)vue-cli2升级到vue-cli3,顺便webpack2升级到webpack4,构建速度一下子从3分钟左右提升到不到1分钟(vue-cli

  • 浅谈webpack和webpack-cli模块源码分析

    webpack4与webpack3的区别 webpack4.0 以后,似乎执行方式就发生了改变,不再是 webpack 一波流,而是多了一个 webpack-cli.webpack3中webpack-cli是合在webpack中.所以在命令行运行 webpack 命令的同时,会提示让你再装一个 webpack-cli. 执行脚本到打包结束流程 1.当我们安装了webpack模块后,就会在node_modules/.bin目录下生成一个webpack.webpack.cmd,webpack是lin

随机推荐