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

前言：作者君会不定期将自己实际中遇到的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.csdn.net/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