webpack报错大全

本人在学习的时候遇到的一些问题及解决方法在此记录一下并且分享给大家。如有错误欢迎评论指正！

一、Automatic publicPath is not supported in this browser问题

1、起因

最近在学习webpack之时遇到了这个问题，问题是出现在学习打包html中的img标签之时，根据教程打，教程的loader配置是这样的

            {
                test:/\.(jpg|png|gif)$/,
                //多个loader时，使用use，一个时可以直接使用loader
                //下载两个包url-loader  file-loader,前者依赖于后者
                loader:'url-loader',
                options:{
                    //图片大小小于8kb,就会被base64处理
                    //优点:减少请求数量(减轻服务器压力)
                    //缺点:图片体积更大(文件请求速度更慢)
                    limit: 8 * 1024,
                }
            },
            {
                test:/\.html$/,
                //处理html中的图片问题，负责引入，从而可以被url-loader处理
                loader:'html-loader'
                
            }

在这种配置下，他的打包运行情况是html中的img的src路径会被替换成module object，这是因为url-loader是使用es6的模块化进行处理的，而html-loader是使用commonjs进行处理的，解决这个问题只需要在options中加入esModule：false即可，教程如是说。

但自己在运行的时候发现无论加不加esModule：false都是报错的，报错是Automatic publicPath is not supported in this browser，

截图如下

查找网上解决方法，发现只有最近几天的博客有这种问题。（猜想可能是版本问题，我使用的5.1.x版本，教程是4.3.x）

2、解决方法

网上说的解决方法都是在output中添加publicPath:'./'但是没说原因。

经过测试，确实可行。该方式会在输出的静态资源的路径前自动加上./这时候资源引入就成功了，也不报错。

首先说明我使用的是5.1.x版本，后续版本可能会变化。

我的目录结构：

对于publicPath的理解，我是参考此博客publicPath的理解,加上自己的测试总结出：

publicPath会自动在输出的静态资源的路径前加上我们写的值，而加上publicPath:'./'的原因就是让我们html中img标签的路径正确，因为输出的图片是在build文件夹中，但不会创建新的文件夹，我这个版本可能是需要自己加上这个publicPath，而我所看的教程是不用的，因此报错了。如果我们将输出的资源放在build中的其他文件夹，则我们的./也要改成对应路径。即输出的文件路径与publicPath路径一致。上面博客的总结是：因为一致所以可以不用写publicPath但是在我这个版本中报错了。所以加上即可

二、Cannot find module 'webpack-cli/bin/config-yargs问题

1、起因

在学习使用devServer时

上来就给我一个下马威，第一次使用就报错，没错就是报这个错，一开始不明所以，作为一个小白，以为是哪里代码写错了，检查一通没问题。查阅资料发现是webpack-cli与webpack-dev-server版本不兼容问题。

因为"webpack-cli": "^3.1.2"这种写法,真正安装是3.3.2，恰巧升级是断崖式，目录结构都变了，找不到对应模块。

所以webpack-cli与webpack-dev-server都需要重新安装，并且因为webpack-cli与webpack版本有关，所以webpack也需要重新安装。

经过反复安装测试以下版本是可用的。

"webpack": "^4.44.2",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"

npm i webpack@4.44.2 webpack-cli@3.3.12 webpack-dev-server@3.11.0 -D

测试可以成功打开服务器，但是发现能打开服务器，如果还是会报错UnhandledPromiseRejectionWarning: TypeError: this.getResolve is not a function，大概是这句话，查阅资料发现，是因为上面安装的版本过低，css-loader,style-loader版本过高导致

"css-loader": "^3.3.0",
 "style-loader": "^1.0.0"

可调整成这个试试。

2、解决方法

后面觉得太麻烦了，不应该最新版本会有问题，于是重新安装webpack,webpack-cli,webpack-dev-server之后居然不报错！

想起之前我是webpack与webpack-cli分开安装的,现在是一起安装的。所以可能会有版本不一致问题。

总结：

注意安装webpack和webpack-cli时同时安装。

想起之前我是webpack与webpack-cli分开安装的,现在是一起安装的。所以可能会有版本不一致问题。

总结：

注意安装webpack和webpack-cli时同时安装。