前端 webpack打包常见错误总结及其解决方法1：events.js:141 throw er; // Unhandled 'error' event

最新推荐文章于 2024-05-11 17:59:43 发布

M_ye

最新推荐文章于 2024-05-11 17:59:43 发布

阅读量4.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端-webpack

本文链接：https://blog.youkuaiyun.com/qq_41800210/article/details/84063210

前端-webpack 专栏收录该内容

5 篇文章

订阅专栏

本文详细解析了在使用Webpack过程中常见的三个错误：端口被占用、Webpack4版本更新后的配置问题以及全局安装extract-text-webpack-plugin时的错误。提供了具体的操作步骤和解决方法，帮助开发者快速定位并解决问题。

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

前言：作者君会不定期将自己实际中遇到的bug和解决方法放上来，因为是自己遇到的，所以不见得面面俱到，大家加油！

1、端口被占用命令窗提示错误如下

events.js:141
      throw er; // Unhandled 'error' event
      ^
Error: listen EADDRINUSE 127.0.0.1:8080

解决方法：

打开命令提示符窗口，输入：

netstat -ano

查看你的webpack.config.js文件里所使用的端口是否被占用，如果被占用，更改配置文件里的端口名，找一个当前没有被占用的端口即可。

注意：如果做了Json打包设置，还需要更改package.json文件里的端口名。

2、 webpack4.版本容易形成的错误提示

E:\实例\education-system\node_modules\webpack\lib\webpack.js:185
                        throw new RemovedPluginError(errorMessage);

Error: webpack.optimize.CommonsChunkPlugin has been removed,
 please use config.optimization.splitChunks instead.

造成这个错误的原因是webpack升级到4.以后的版本，原本的webpack.optimize.CommonsChunkPlugin不能用了。需要重新配置webpack.config.js文件

解决方法：推荐这个网址的解答 https://blog.youkuaiyun.com/github_36487770/article/details/80228147

3、未全局安装容易出的错误

internal/modules/cjs/loader.js:584
    throw err;

Error: Cannot find module 'extract-text-webpack-plugin'

解决方法：

重新全局安装webpack

npm install webpack --save-dev -g

再安装extract-text-webpack-plugin

npm install --save extract-text-webpack-plugin