深入Craco/Webpack升级：2. 升级过程中的常规错误集接上篇npm start/test/build调试文章，

〇、上篇文章

一、常规错误集

Module not found: Error: Can't resolve 'path' in xxx （我们项目中是/node_modules/react-retina-image/dist'）

原因：webpack < 5 的版本默认包含 Node.js 核心模块的 Polyfill，而webpack 5移除了这些polyfill，所以需要按需引入

解决方案：

webpackConfig.resolve.fallback = {
  "path": require.resolve("path-browserify")
}

Uncaught ReferenceError: process is not defined

原因：webpack < 5 的版本默认包含 Node.js 核心模块的 Polyfill，而webpack 5移除了这些polyfill，所以需要按需引入

解决方案：

cfg.webpack.plugins.push(new webpack.ProvidePlugin({
  process: 'process/browser',
}))

chunk 93457 [mini-css-extract-plugin] Conflicting order. Following module has been added:

原因：CRA的打包警告，可参考github.com/webpack-con… 在我们项目中大部分都在使用tailwindcss, 即使用到scss文件，各个组件都有各自的根类名，所以我们不care具体的引入顺序解决方案：

const MiniCssExtractPluginInstance = webpackConfig.plugins.find(
  webpackPlugin => webpackPlugin instanceof MiniCssExtractPlugin
);
// https://github.com/facebook/create-react-app/issues/5372
// Ignore the order for now:
if (MiniCssExtractPluginInstance) {
  MiniCssExtractPluginInstance.options.ignoreOrder = true
}

HardSourceWebpackPlugin相关的所有报错

解决方案：

移除此plugin, 因为webpack 5已经支持了file/memory的缓存方式。参考github.com/mzgoddard/h…
项目中之前使用了webpack 4带来的的Dll动态链接库机制，生成dll库并存在一整套打包机制更新/打包/同步，在生产环境降低了打包时间，但实际上webpack 5的file类型缓存已经是更好的实现方案了。由于开发周期关系，此处我们首先进行平滑升级，先不切换到webpack 5的缓存配置。（需要修改docker base file中的dll部分的代码，改成新的缓存，实在没空再和我们的ops团队沟通了...）以下是Dll打包过程中webpack 5的报错与解决方案

5.1 export '__rest' (imported as '__rest') was not found in 'tslib' (possible exports: default)

原因：查看源码发现webpack尝试去导入tslib.js，而这个文件没有导出任何变量。所以此处需要手动指定为es6版本

解决方案：

alias: {
  // prevent from importing UMD version of tslib
  tslib: 'tslib/tslib.es6.js'
}

webpack.js.org/configurati…

二、后续内容

Tapble介绍以及升级过程中webpack自研plugins的迁移与兼容处理