webpack v4+升级v5+ 踩坑笔记

踩坑笔记

（希望能持续更新…）
工作中遇到了一个小问题，然后搞了两天，怀疑是webpack的问题，因此升级了现有项目的webpack，webpack v4+ 升级到了 v5， node v12+ 升级到了 node v16+， 本来打算升v17的， 发现和16版本改动不小， 和开发其他项目还得切回了， 索性就降到了v16，因此node升级到v17，要慎重啊！！！

升级依赖

想着既然webpack都升级了， 那依赖也升了吧，
先下载个 npm-check-updates  

 	yarn global add npm-check-updates 

可以先 ncu 查看一下需要升级的依赖， 然后 ncu -u 依赖全部升级
npm-check-updates github地址

小case

1、 如果之前配置了node，那么就会报错， Webpack 5 不再自动填充 Node.js 核心模块，这意味着如果您在浏览器或类似设备中运行的代码中使用它们，您将必须从 npm 安装兼容的模块并自己包含它们
就需要让你去resolve.fallback，里面配置，去引用依赖，如果不用的话，就给个false;

2、运行打包的时候，发现我的目录下多了几张svg，png的图片， 本来打算看一下是什么图片的， 还打不开， 提示文件损坏， 查了一下资料发现， 原来css-loader(6.7.1) 现在也开始打包背景图片了,这小子野心还挺大，这不行啊，得处理掉。（配置一下图片的处理 增加 esModule:false, type:‘javascript/auto’）

// module.rules 
{
   
    // TODO 位置需要调整下，不然拿到的路径不对。
    test: /\.(png|svg|jpg|gif|ico)$/,
    use: [{
   
        loader: 'file-loader',
        options: {
   
            esModule:fal