从3到4

官方指导文档 webpack.docschina.org/migrate/4/#…

这里的升级其实并不困难，主要是以下几个方面的内容：

更新node到6以上版本
为了兼容，更新插件
配置中增加mode配置（详见文档）
移除不推荐和被移除的插件
移除CommonsChunkPlugin，用optimization.splitChunks代替
用module.rules代替module.loaders

3到4的升级，我并没有遇到什么问题，基本是一条过的，但是4到5的升级就很坎坷了

从4到5

坎坷之路就此开始。。。

文档：webpack.docschina.org/migrate/5/#…

升级node到10.13.0以上
对比文档升级废弃的配置项
测试webpack5的兼容性（开始了开始了，error开始了）

在 webpack 4 的配置中添加如下选项，检查一下构建是否仍然正确的运行。
```
module.exports = {
  // ...
  node: {
    Buffer: false,
    process: false,
  },
};
```
报错信息：
```
ReferenceError: Buffer is not defined
```
npm安装之后还是报错找不到，后不知道在哪个文章上看到的解决方法了，感谢老铁提供的配置信息
```
module.exports = {
   // ...
   plugins: {
     ...
     new webpack.ProvidePlugin({
         Buffer: ['buffer', 'Buffer']}),
   },
 };
```
完美解决一个，下一个

报错信息：
```
ReferenceError: process is not defined
```
解决方法：下载安装process以后，进行配置
```
new webpack.ProvidePlugin({
         process: 'process/browser',
     }),
```
...继续下一个

我解决完上述两个问题以后，报错信息就变成了很准确的一类，这类报错信息类型一致，但是信息各不相同，基本解决方法一致，报错信息中会附带解决方法，安装，然后在resolve中进行配置：

具体的报错信息不记得了（升级完才来写的这篇踩坑，下次一定一边弄一边记录），基本就是报一个error，说一个包找不到，未定义或者什么的，我升级的过程遇见的三个error是crypto-browserify、buffer和stream-browserify引起的，分别安装之后，再按照报错中的提示在webpack.config.js中配置即可

我的配置信息：
```
module.export = {
    ...,
    resolve:{
        ...,
        fallback:{
                crypto: require.resolve('crypto-browserify'),
                buffer: require.resolve("buffer/"),
                stream: require.resolve("stream-browserify"),
            },
    }
}
```
但是在解决stream的时候根据上面的操作怎么都解决不了，一直报错，清缓存，重启，卸载重装都没有解决，最后去查了一些资料，发现还有一个包要装
```
npm install readable-stream
```
完美解决

就此，升级基本完成。

余下的工作就是根据webpack5的一些特性针对自己的项目做一些优化了，改日继续

webpack5升级踩坑--主要针对报错及处理

从3到4

从4到5