Webpack3 升级到 webpack4 时遇到的问题汇总

最新推荐文章于 2021-07-23 19:25:02 发布
原创 最新推荐文章于 2021-07-23 19:25:02 发布 · 1.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端开发 #webpack

在将Webpack从3升级到4的过程中，遇到了如MissingDeps.some is not a function、this.htmlWebpackPlugin.getHooks is not a function和“proxy”配置问题。解决方案包括升级包到最新版本、调整webpack配置及使用src/setupProxy.js文件处理proxy设置。详细解决步骤见正文。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

项目在对 webpack 的版本升级的过程中，出现了各种各样的问题，今天就把其中比较典型的问题总结一下，作为记录。

一、MissingDeps.some is not a function

错误提示中，提示 react-dev-utils 包有问题，TypeError: MissingDeps.some is not a function。

  • 解决方案：升级 react-utils-dev 包到 6.0.0 版本之后即可。将 package.json 中的 react-utils-dev 依赖删除掉，重新安装匹配版本插件。
$ npm install react-utils-dev@next --save-dev

二、this.htmlWebpackPlugin.getHooks is not a function

运行项目时，提示错误：this.htmlWebpackPlugin.getHooks is not a function

  • 解决方案：
    • 1.安装与 webpack4 匹配的 html-webpack-plugin 插件：npm install html-webpack-plugin@next --save-dev
    • 2.修改 webpack 配置文件：
最低0.47元/天 解锁文章

200万优质内容无限畅学
webpack 升级5.x遇到的问题
时遇的博客
05-23 2177
webpack 升级5.x遇到的问题 之前的djaongo+vue项目，使用webpack打包，运行正常，但是有段时间未修改，重新运行npm run dev时发现报错，原因是webpack的升级,从v4->v5,需要升级webpack-cli、plugin、loader，以及部分废弃的配置需要升级，在此记录遇到的问题及解决方法。 文章目录webpack 升级5.x遇到的问题项目使用的依赖版本问题及解决方法总结参考博客 项目使用的依赖版本 // package.json { "dependenc
ruoyi接口权限校验
xuhss_com的博客
06-21 2236
此文章属于ruoyi项目实战系列ruoyi系统在前端主要通过权限字符包含与否来动态显示目录和按钮。为了防止通过http请求绕过权限限制，后端接口也需要进行相关权限设计。由于对原理还不够深入了解，所以此处只粗浅讲解在ruoyi项目是如何应用的。 在请求调用接口前，被注解的接口需要首先通过验证。通过注解参数返回值和来判断是否有权限。 Ruoyi并没有使用原生的Spel表达式，而是使用了自定义的类，通过其中自定义方法 来进行权限判断。注解使用举例： 接口权限校验流程 粗略用两个例子来讲解前端请求如何经过后端接口权
webpack3升级到webpack4遇到的问题
龙马的猫
10-09 855
因项目需要，要将webpack3升级到webpack4，升级前版本webpack@3.6.0 安装webpack4 npm install webpack webpack-cli --save-dev 安装完成 安装完成运行项目报错： 1.报错：Error: Cannot find module 'webpack/bin/config-yargs’ 原因：webpack 和 webpack-dev-server版本不匹配，更新webpack-dev-server 更新之后版本3.11.0 ...
webpack合并配置报错：TypeError: webpackMerge is not a function
qq_36350876的博客
07-23 1036
我将dev配置和prod配置分离之后，把公共的配置抽离出来后，使用webpackMerge进行合并配置后，使用npm run build 报错了，提示：TypeError: webpackMerge is not a function。 报错提示如下： 我的dev和prod配置如下： 查找原因之后发现时这个问题：因为webpackMerge不是一个function， 只需要在dev和prod配置里面使用webpackMerge.merge即可解决; 如下图： ...
webpack升级4出现的问题
weixin_30790841的博客
06-03 182
webpack3升级到4出现了很多问题，经过验证报错信息如下 1 Module parse failed: Unexpected token (6:9) You may need an appropriate loader to handle this file type. | //Vue.use(Router) | var Login = function Login() { &...
webpack优化和升级到webpack4y遇到的问题
qq1498982270的博客
07-10 915
webpack优化 1、就是减少打包体积，避免加载不需要的资源 提高构建速度 缩小编译范围，减少不必要的编译工作，即 modules、mainFields、noParse、includes、exclude、alias全部用起来。 开启enforeExtension dll loader缓存（cacheDirectory) dll DLLPlugin插件，对不常更新的库，一次打包，存在...
webpack3升级到webpack4遇到问题总结
10-16
以上就是从webpack3升级到webpack4时可能遇到的主要问题及其解决方法。这个过程可能涉及代码重构和配置调整，但遵循这些步骤可以帮助顺利完成升级。在升级过程中，建议查阅官方文档和社区资源，以便获取最新信息和...
Vue项目从webpack3.x升级webpack4不完全指南
10-17
在讨论Vue项目从webpack3.x升级到webpack4.x的不完全指南时，我们首先要认识到webpack是一个用于现代JavaScript应用程序的静态模块打包器。它通过打包应用程序所需的资源来提供模块化、调试和性能优化等功能。而Vue....
webpack@v4升级踩坑(小结)
10-17
这篇文章将总结在升级到 Webpack 4 过程中可能遇到的问题及解决方案。 首先，升级前应仔细阅读官方的更新日志，以了解新版本的主要变化。其中值得注意的几点包括： 1. **命令行接口（CLI）分离**：在 Webpack 4 中...
webpack升级到4版本遇到的坑
老夫风清扬的博客
03-13 5289
问题一：CommonsChunkPlugin插件的报错，因为webpack4已经把该插件移除了，用optimization.splitChunks替代 报错信息如下： Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead. ...
Webpack4 升级报错 Error: Cannot find module 'webpack-cli/bin/config-yargs' 等（含html-webpack-plugin）
曦璞维一的技术博客
10-18 1万+
问题一 Error: Cannot find module 'webpack-cli/bin/config-yargs' 问题二 TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function 问题三 TypeError: Cannot read property 'eslint' of undefined 问题四 TypeError: Cannot read property 'vue' of undefined
TypeError: ****.some is not a function
weixin_44153063的博客
03-18 3505
记录一下 在使用Vue-Element-Admin框架时，用除Admin身份外登录会报错，检查一番后发下是后台接口返回的roles不是一个数组。 解决方案 修改一下后台接口返回的数据格式即可。 类似如下数据格式 String[] roles = new String[1]; roles[0] = "admin"; ...
关于android已经加了permission却仍报错的问题
ysw361564483的博客
10-06 813
已经在Manifest文件中添加了uses-perssion权限 位置也对 却仍报错的原因：   geogle在android23之后做了权限控制。一些敏感权限，即是你声明了，代码中使用到的时候，也要重新提示用户然后给于授权的。   解决方法：把targetSDkVersion改为23以下 （eg：22）   参考：http://ask.csdn.net/questi
JS中常见的 “函数名 is not a function” 错误
热门推荐
weixin_40345099的博客
09-30 28万+
js中常见的错误，例如Uncaught TypeError: x is not a function 其原因除了函数本身有错之外，还有一种很奇怪的情况：函数本身没有错，但是运行时就是不能正常运行。这种情况与javascript的特性有关：变量与函数声明前置的优先级。 首先看代码： console.log(x) console.log(x()); var x=1; function x(){...
webpack升级踩坑
weixin_30532369的博客
08-27 407
webpack3.8.1 => webpack4.39.2 1、error：webpack is not a function fix scripts/start.js const compiler = createCompiler(webpack, config, appName, urls, useYarn); => const compiler = createComp...
【036】html-webpack-plugin2.22.0、Webpack与gulp结合时出现ReferenceError: window is not defined错误的解决办法
zhangchao19890805的专栏
08-12 1万+
一、问题描述下面是在命令行给出的错误提示：[10:16:36] Starting 'webpack'... Unhandled rejection Error in plugin 'webpack-stream' Message: ReferenceError: window is not defined - index.html:50 Object.<anonymous> D
webpack HtmlWebpackPlugin插件常用配置
weixin_34310785的博客
04-02 757
webpack使用日常，使用webpack是需要压缩html模板代码请注意 var HtmlWebpackPlugin = require('html-webpack-plugin') webpackconfig = { ... plugins: [ new HtmlWebpackPlugin({ template: 'src/index....
webpack4配置详解之常用插件分享
weixin_34319999的博客
11-19 456
　　前言　　　　继上一次webpack的基础配置分享之后，本次将分享一些工作中项目常用的配置插件、也会包含一些自己了解过觉得不错的插件，如有分析不到位的，欢迎纠错，嗯，这些东西文档都有，大佬可绕过。　　　　Wepack4之后废弃了很多的插件，这里只会讲解webpack4还支持的（包含4之前插件），已经废弃的将不再阐述。　　　　上一次的分享之后，有部分掘金网友留言质疑：骗小白的赞、是否原创、是否是抄...
Vue2项目的webpack3升级到webpack5
最新发布
03-28
<think>好的，我现在需要处理用户关于将Vue2项目的webpack3升级到webpack5的问题。首先，我得回顾一下用户之前的对话历史。用户之前询问过如何在VSCode中终止Vue项目，现在转向项目构建工具的升级，可能他们正在维护一个较旧的Vue2项目，遇到了性能或兼容性问题，想要通过升级webpack来改善构建速度或利用新特性。 用户当前的问题是升级webpack版本，从3到5。Webpack3到5的跨度较大，中间有版本4，可能会有不少破坏性变更。需要先确认Vue2是否支持webpack5。Vue2默认使用webpack3，但社区可能有适配方案。接下来，我需要考虑升级步骤，可能的依赖冲突，以及配置文件的调整。 首先，我应该检查官方文档和社区资源，看看是否有推荐的迁移路径。可能涉及的主要步骤包括：升级webpack及相关loader/plugin的版本，调整webpack配置，处理废弃的功能，解决可能的兼容性问题。 常见的升级步骤可能包括：逐步升级到webpack4，再升级到5，或者直接跳版本但要处理更多变更。需要确认相关依赖如vue-loader、css-loader、babel-loader等是否兼容webpack5。例如，vue-loader在15+版本需要webpack4+，可能需要升级vue-loader到合适版本。 另外，webpack5引入了模块联邦、持久缓存等新特性，但也会移除一些旧配置，比如某些插件或loader的用法。例如，可能不再需要UglifyJsPlugin，而改用TerserPlugin。此外，需要处理可能出现的polyfill问题，因为webpack5移除了Node.js核心模块的自动polyfill，可能需要手动添加。 用户可能遇到的常见问题包括：构建错误、loader配置失效、插件不兼容、devServer配置变化等。需要指导用户如何逐步调试，比如检查报错信息，更新相关包版本，调整配置中的废弃选项。 此外，可能需要更新其他工具链，如Babel、ESLint等，以确保与webpack5兼容。还要考虑测试环节，确保升级后的构建结果符合预期，功能正常。 需要提醒用户在升级前做好版本控制，比如使用Git，以便回滚。同时建议分步骤进行，逐步验证每个阶段的正确性，避免一次性修改过多导致难以排查问题。 总结回答结构：先概述升级的必要性和挑战，再列出详细步骤，包括依赖升级、配置调整、处理废弃功能、解决常见问题，最后建议测试和验证。还要注意提醒用户关注社区资源和可能的陷阱，比如特定插件的不兼容情况。</think>将 Vue2 项目的 Webpack3 升级到 Webpack5 需要谨慎处理兼容性问题。以下是分步骤的升级指南： --- ### 一、升级前的准备 1. **备份项目** 使用 Git 或其他版本控制工具提交当前代码，确保可随时回滚。 2. **检查依赖兼容性** 确认 Vue2 及相关插件（如 `vue-loader`、`vue-template-compiler`）是否支持 Webpack5。 - Vue2 需搭配 `vue-loader@15.x`（支持 Webpack4+） - Webpack5 最低要求 Node.js 10.13+ --- ### 二、逐步升级依赖 1. **升级 Webpack 及其核心工具** ```bash npm install webpack@5 webpack-cli@4 webpack-dev-server@4 --save-dev ``` - 注意：`webpack-dev-server@4` 对应 `webpack@5`，旧版配置可能需要调整。 2. **更新相关 Loader 和 Plugin** ```bash npm install vue-loader@15 css-loader@6 style-loader@2 file-loader@6 url-loader@4 mini-css-extract-plugin@2 --save-dev ``` - 关键依赖版本参考： - `vue-loader@15.x`（必须与 `vue-template-compiler` 版本一致） - `css-loader@6.x` 和 `style-loader@2.x`（Webpack5 兼容版本） - 替换 `extract-text-webpack-plugin` 为 `mini-css-extract-plugin@2.x` --- ### 三、调整 Webpack 配置 1. **模式声明** 在配置文件中显式指定模式（Webpack5 强化了模式检测）： ```js module.exports = { mode: process.env.NODE_ENV === &#39;production&#39; ? &#39;production&#39; : &#39;development&#39;, // 其他配置... } ``` 2. **更新 Loader 配置** - **Vue 文件处理**： ```js const { VueLoaderPlugin } = require(&#39;vue-loader&#39;); module.exports = { module: { rules: [ { test: /\.vue$/, loader: &#39;vue-loader&#39; } ] }, plugins: [new VueLoaderPlugin()] }; ``` 3. **替换废弃插件** - 移除 `new webpack.optimize.UglifyJsPlugin()`，改用 `terser-webpack-plugin`： ```bash npm install terser-webpack-plugin@5 --save-dev ``` ```js const TerserPlugin = require(&#39;terser-webpack-plugin&#39;); module.exports = { optimization: { minimize: true, minimizer: [new TerserPlugin()] } }; ``` 4. **处理 Polyfill 问题** Webpack5 移除了 Node.js 核心模块的自动 Polyfill（如 `process`、`buffer`）： - 手动安装 Polyfill： ```bash npm install process buffer --save-dev ``` - 在入口文件（如 `main.js`）中引入： ```js import process from &#39;process&#39;; import { Buffer } from &#39;buffer&#39;; window.process = process; window.Buffer = Buffer; ``` --- ### 四、解决常见报错 1. **`Error: Chunk.entrypoints`** 升级 `html-webpack-plugin` 至最新版（建议 `html-webpack-plugin@5`）。 2. **`Cannot find module &#39;webpack/lib/RequestShortener&#39;`** 部分老旧插件（如 `eslint-webpack-plugin` 旧版）不兼容 Webpack5，需升级或替换。 3. **HMR 热更新失效** 在 `webpack-dev-server` 配置中添加： ```js devServer: { hot: true, client: { overlay: false } // 可选：关闭浏览器错误覆盖层 } ``` --- ### 五、验证与优化 1. **测试构建流程** - 开发环境：`npm run serve` 检查 HMR 是否正常。 - 生产环境：`npm run build` 确认产物无报错。 2. **启用持久缓存（可选）** 在 Webpack5 中启用缓存提升构建速度： ```js module.exports = { cache: { type: &#39;filesystem&#39;, buildDependencies: { config: [__filename] } } }; ``` --- ### 六、注意事项 - **逐步升级**：可先升级到 Webpack4，再升级到 5，减少破坏性变更的影响。 - **依赖排查**：使用 `npm outdated` 检查过时依赖，优先升级与构建相关的包。 - **社区支持**：参考 Vue2 + Webpack5 的模板项目（如 [vue-webpack5-boilerplate](https://github.com/stonkpunk/vue-webpack5-boilerplate)）。 通过以上步骤，可完成从 Webpack3 到 Webpack5 的平滑升级，显著提升构建性能并支持现代前端特性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值