Kotlin多平台React项目Webpack DevServer无法找到打包JS脚本

问题背景 #

用IntelliJ向导创建的全栈应用，后端启动正常，但前端执行jsBrowserRun或jsBrowserDevelopmentRun任务时，Webpack DevServer无法找到打包后的JS文件。已添加index.html和webpack.config.js，尝试移除publicPath、historyApiFallback等配置，参考相关配置方案后仍未解决。

现有配置文件 #

index.html #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="/static/favicon.ico" type="image/x-icon">

    <title>Niblette</title>
    <script src="/Niblette-frontend.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>

webpack.config.js #

;(function(config) {
    config.mode = 'development'
    config.devServer.port = 8088
    config.devServer.historyApiFallback = true
    config.devServer.devMiddleware = {
        publicPath: '/'
    }
})(config);

相关截图 #

• 项目文件结构：
  
• 浏览器报错：
  
• 控制台输出：
  

排查与解决建议 #

1. 核对打包产物文件名
   检查build/js/packages/[项目名]/kotlin/目录下实际生成的JS文件名，确保index.html中<script>标签的src路径和实际文件名完全一致——控制台输出显示的打包文件名可能和你手动指定的Niblette-frontend.js存在差异。

2. 显式指定Webpack输出文件名
   在webpack.config.js中添加输出文件名配置，避免自动命名导致的路径不匹配：

   ;(function(config) {
       config.mode = 'development'
       // 显式指定输出文件名，和index.html中的引用保持一致
       config.output.filename = 'Niblette-frontend.js'
       config.devServer.port = 8088
       config.devServer.historyApiFallback = true
       config.devServer.devMiddleware = {
           publicPath: '/'
       }
   })(config);
   

3. 确认Gradle配置加载自定义Webpack文件
   在项目的build.gradle.kts中，确保JS模块配置正确加载了自定义的Webpack配置文件：

   js {
       browser {
           commonWebpackConfig {
               cssSupport.enabled = true
               // 指定自定义Webpack配置文件路径
               webpackConfigFile = file("webpack.config.js")
           }
           runTask {
               devServer = devServer.copy(
                   port = 8088,
                   historyApiFallback = true
               )
           }
       }
       binaries.executable()
   }
   

4. 清理缓存后重新构建
   执行以下命令清理旧构建缓存，避免缓存导致的配置不生效问题：

   ./gradlew clean jsBrowserDevelopmentRun
   

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