Spring Boot集成React开发：Ctrl+F5无法更新JS代码问题求助

听起来你遇到了开发环境下JS代码更新不生效的典型缓存问题——虽然webpack已经重新生成了bundle.js，但浏览器或者Spring Boot的静态资源缓存还拿着旧文件，就算按Ctrl+F5硬刷新也绕不过去。我给你几个针对性的解决思路，按顺序试试：

• 给Webpack输出文件添加内容哈希，彻底规避缓存
  这是最根本的解决方案：让Webpack在每次代码变更时生成带唯一哈希值的文件名，比如bundle.[contenthash].js，这样浏览器会把新文件当成全新资源，不会用缓存。修改你的Webpack配置文件：

  module.exports = {
    // ... 其他配置
    output: {
      filename: 'bundle.[contenthash].js', // 替换原来的bundle.js
      path: path.resolve(__dirname, 'src/main/resources/static/built')
    }
  };
  

  注意：此时HTML里不能再硬编码引用bundle.js，需要用模板方式自动引入最新文件名，比如用Thymeleaf的话可以用@{/static/built/bundle*.js}来匹配，或者用Webpack的html-webpack-plugin自动生成HTML文件。

• 禁用Spring Boot开发环境的静态资源缓存
  Spring Boot默认会给静态资源添加缓存头，开发环境下可以直接关闭缓存，确保每次请求都从服务器拿最新文件。在application-dev.yml里添加配置：

  spring:
    web:
      resources:
        cache:
          period: 0 # 禁用缓存
        chain:
          cache: false # 关闭资源链缓存
    devtools:
      livereload:
        include-paths: static/**, static/built/** # 确保LiveReload监听JS所在的built文件夹
  

• 确认Webpack的Watch模式是否开启
  虽然你说修改app.js后能生成新的bundle.js，但还是要确认下frontend-maven-plugin是否配置了Webpack的watch模式，这样修改代码后会自动触发打包，而不用手动执行命令。在pom.xml的plugin配置里添加：

  <plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>1.12.0</version>
    <executions>
      <execution>
        <id>webpack-watch</id>
        <goals>
          <goal>webpack</goal>
        </goals>
        <configuration>
          <arguments>--watch</arguments> <!-- 开启watch模式 -->
        </configuration>
      </execution>
    </executions>
  </plugin>
  

• 手动清空浏览器缓存测试
  有时候Ctrl+F5可能因为浏览器的缓存策略（比如某些浏览器对静态资源的强缓存设置）还是无法彻底清除，你可以尝试用Ctrl+Shift+Delete打开缓存清理窗口，直接清空缓存，或者用隐私/无痕窗口打开页面，看是否能加载新的JS代码。

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