webpack - 请教`Webpack`打包后找不到资源？

Question

请教Webpack打包后找不到资源？

入口文件如下：

const Fiexd = lazy(() => import('./Fiexd'));const ZoomFiexd: FC<PropsWithChildren<{}>> = ({ children }) => (    <Suspense fallback={null}>        <Fiexd>{children}</Fiexd>    </Suspense>);export { ZoomFiexd };export default ({ children }: PropsWithChildren<{}>) => {    return (        <div className="zoom-default-3">{children}</div>    );};

打包在lib目录，如下：

874.index_bundle.js874.index_bundle.js.mapindex_bundle.jsindex_bundle.js.LICENSE.txtindex_bundle.js.map

入口文件index_bundle.js在package.json中设置main指向./lib/index_bundle.js就好了

但是874.index_bundle.js这个文件就找不到了，提示如下

ERRORLoading chunk 874 failed.(error: http://localhost:8686/874.index_bundle.js)ChunkLoadError: Loading chunk 874 failed.

于是我去查了下，说是要设置homepage

• 但是无论我是设置./lib/还是设置.，都不对
• 于是我想是不是要将homepage指向./lib/，main入口指向index_bundle.js，还是不对

请问这个要怎么配置？

Answer 1

首先，Webpack打包后找不到资源的问题通常是由于配置问题导致的。在你的情况下，看起来像是Webpack在尝试加载一个名为874.index_bundle.js的chunk时失败了。

对于Webpack的入口文件和资源路径，通常需要确保以下几点：

1. 入口文件路径正确：确保你的webpack.config.js中的入口文件路径正确。如果入口文件是index_bundle.js，那么应该指向这个文件，而不是其他文件。
2. 资源路径正确：确保你的资源文件（如样式表、图片等）的路径正确。如果它们位于lib目录下，那么在代码中应该使用相对路径引用它们。
3. publicPath设置正确：Webpack打包时，可以通过publicPath选项设置公共资源路径。确保这个路径设置正确，以便在浏览器中正确加载资源。

关于你提到的homepage设置，它通常用于指定项目的公共URL。在大多数情况下，你不需要手动设置它，除非你有特殊的需求。

如果你仍然无法解决问题，可以尝试以下步骤：

1. 检查webpack.config.js配置文件，确保入口文件路径和资源路径设置正确。
2. 确保你的资源文件（如样式表、图片等）的路径正确，并且在代码中使用了正确的相对路径引用它们。
3. 检查publicPath设置是否正确。如果你不确定如何设置它，可以查阅相关文档或搜索一些示例。

如果你能提供更多关于你的项目配置和代码的信息，我可以更具体地帮助你解决问题。