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:false,
        }
    }],
    type:'javascript/auto'
}]

3、style-loader 中localIdentName配置报错
webpack potions.modules 配置

// 之前的配置， 现在改了， localIdentName是modules下的一个属性了
{
    test: /\.scss$/,
    use: [
        'style-loader',
        {
            loader: 'css-loader',
            options: {
                modules: true,
                localIdentName: '***-[path][name]_[local]-[hash:base64:5]'
            }
        },
        'sass-loader',
        'postcss-loader'
    ]
},
// 改正后
{
    test: /\.scss$/,
    use: [
        'style-loader',
        {
            loader: 'css-loader',
            options: {
                modules: {
                    localIdentName: '***-[path][name]_[local]-[hash:base64:5]'
                },
            }
        },
        'sass-loader',
        'postcss-loader'
    ]
}

4、Uncaught ReferenceError: process is not defined

in package.json
v4: webpack --mode development --watch
至
v5: webpack watch --mode development.

	new webpack.DefinePlugin({
	    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
	}),

clean-webpack-plugin （^4.0.0）

首先需要注意：
*const CleanWebpackPlugin = require(‘clean-webpack-plugin’);*是会报错的，这个版本是返回的一个对象， 因此需要 const {CleanWebpackPlugin} = require(‘clean-webpack-plugin’);

其次这个版本的插件是传一个对象进去，具体解释可查看标题的github地址

export interface Options {
    dry?: boolean;
    verbose?: boolean;
    cleanStaleWebpackAssets?: boolean;
    protectWebpackAssets?: boolean;
    cleanOnceBeforeBuildPatterns?: string[];
    cleanAfterEveryBuildPatterns?: string[];
    dangerouslyAllowCleanPatternsOutsideProject?: boolean;
}

由于我的webpack配置是多个入口文件， 出口文件也不是dist，因此出现了一个很尴尬的情况， 运行脚本把我二百多个文件全部删除了，幸亏有git，能够恢复。

然后仔细查看了一下参数的解释，默认情况下 cleanOnceBeforeBuildPatterns:是[‘**/*’]全删， 因此进行了一下的配置，

new CleanWebpackPlugin({
	verbose: true, // 日志保留在控制台
	cleanStaleWebpackAssets: false,
	// outputDir: 你的出口文件
	cleanOnceBeforeBuildPatterns: [path.join(process.cwd(), `./${outputDir}/*`)],
	// remove files that are not created directly by Webpack.
	// cleanAfterEveryBuildPatterns
})

copy-webpack-plugin （^11.0.0）

原来参数只是一个数组即可， 现在也是一个对象了 { patterns, options}

terser-webpack-plugin （^5.3.3）

在webpack5中，默认就会有这个插件的， 如果不是想自定义去配置的话，就可以不用按照啦，
重点需要注意的是，
1、cache 这个参数不需要在这个配置了，webpack有配置cache的地方, 默认位置为node_modules/.cache/webpack.
2、terserOptions的配置可以 看这

积跬步,至千里。积小流,成江海