Webpack配置resolve后编译成功但浏览器报模块找不到错误求助

嘿，我来帮你搞定这个Webpack的小问题！你遇到的情况有点特殊：配置resolve.extensions后编译正常，但浏览器仍报错，移除配置终端直接报错。咱们一步步拆解问题：

1. 先检查HTML模板的引入方式 #

你的HtmlWebpackPlugin用了./app/index-template.html作为模板，千万不要在这个模板里手动引入main.jsx！如果模板里写了类似<script src="./main.jsx"></script>的代码，浏览器会直接加载未被Webpack编译的原文件，自然无法识别省略后缀的导入语句。

正确的做法是：模板里只保留页面结构，HtmlWebpackPlugin会自动把Webpack打包好的app.bundle.js注入到最终生成的dist/index.html里。

2. 清理缓存，重新构建 #

缓存是很多诡异问题的元凶：

• 手动删除dist目录，再重新执行构建命令（比如npm run build或npm start）
• 打开浏览器开发者工具，勾选「禁用缓存」，刷新页面测试

3. 优化resolve.extensions的顺序（可选） #

你当前的配置extensions: ['.js', '.jsx']是合法的，但Webpack会按顺序查找文件。既然你的React组件都是.jsx后缀，可以把.jsx放在前面，让Webpack优先查找：

resolve: {
  extensions: ['.jsx', '.js']
}

这能避免万一出现同名.js文件的干扰，让配置更贴合你的项目场景。

4. 确认main.jsx被纳入构建流程 #

Webpack只会处理入口文件（./app/index.jsx）及其依赖的模块。请确保index.jsx里正确导入了main.jsx，比如：

import './main.jsx';

如果main.jsx没被入口文件引入，Webpack不会编译它，浏览器直接加载的话肯定会报错。

快速验证配置是否生效 #

你可以在index.jsx里直接写省略后缀的导入测试：

import AppBar from './components/AppBar';

如果Webpack编译正常，说明resolve.extensions已经生效，问题肯定出在浏览器加载的文件上。

内容的提问来源于stack exchange，提问作者eignhpants