webpack打包express，各种大量报错，resolve.fallback

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

故事依然发生在使用webpack去打包的时候，目标代码依然是基于express的ssr程序。如果webpack.config.js没有设置好的话，会引发一系列的报错信息。本文依然是处理这些报错信息的。

苏南大叔的“程序如此灵动”博客，记录苏南大叔的编程心得体会。本文测试环境：nodejs@20.18.0，create-react-app@5.0.1，react-router-dom@6.27.0，react@18.3.1，express@4.21.1，webpack-cli@5.1.4。

错误信息

这个时候，报错信息大量输出。类似如下：

ERROR in ./node_modules/body-parser/lib/read.js 20:11-26
Module not found: Error: Can't resolve 'zlib' in 'D:\t\node_modules\body-parser\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }'
        - install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "zlib": false }

大意就是，各种各样的基本模块没有被识别出来。这就很令人不解了。

解决方案

实际上的解决方案，其实也非常简单。无视那些大量的错误输出信息给出的resolve.fallback提示信息。仅仅做下面的修改，即可解决上面的大量错误信息输出。

修改webpack.config.server.js里面的target为node。例如：

// ...
module.exports = {
  // ...
  target: "node",
  // ...
};

当然，也可以使用externals属性，去排除掉express的打包。但是，既然报了这么大量的错，本意上应该是接受express打包进去最终的.js文件吧？所以，还是设置target为node，更好一些。

相关文章

本文紧密关联文章：

• https://newsn.net/say/webpack-react-render.html

这两篇文章里面，虽然解决的问题不一样。一个是关于react的，另外一个是关于express的。
但是方案都非常一致，都是target:node。

结语

关于webpack.config.js里面的externals属性，待后续文章更新。本文的分类归类于webpack，更多相关文章，点击下面的链接：

• https://newsn.net/tag/webpack/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。