Kotlin多平台React项目中Webpack配置不生效问题

问题背景 #

用IntelliJ 2022.3.3向导创建Kotlin全栈应用，仅调整Gradle版本为8.0.2并添加slf4j依赖后，Demo服务器与前端可正常启动。后续尝试修改前端端口等配置，添加了webpack.config.d文件夹及内部的webpack.config.js文件，但运行任意Gradle任务后，修改内容均未同步到webpack.config.evaluated.js，配置完全不生效。

原配置内容 #

初始webpack.config.js #

module.exports = {
    mode: 'development',
    devServer: {
        port: 8088,
    },
};

项目build.gradle.kts配置 #

plugins {
    kotlin("multiplatform") version "1.8.10"

    application
}


group = "de.splitframe"
version = "1.0-SNAPSHOT"

repositories {
    mavenCentral()
    maven("https://maven.pkg.jetbrains.space/public/p/kotlinx-html/maven")
}

kotlin {
    jvm("backend") {
        jvmToolchain(16)
        withJava()
        testRuns["test"].executionTask.configure {
            useJUnitPlatform()
        }
    }
    js("frontend", IR) {
        binaries.executable()
        browser {
            commonWebpackConfig {
                cssSupport {
                    enabled.set(true)
                }
            }
        }
    }
    sourceSets {
        val commonMain by getting
        val commonTest by getting {
            dependencies {
                implementation(kotlin("test"))
            }
        }
        val backendMain by getting {
            dependencies {
                implementation("io.ktor:ktor-server-netty:2.0.2")
                implementation("io.ktor:ktor-server-html-builder-jvm:2.0.2")
                implementation("org.jetbrains.kotlinx:kotlinx-html-jvm:0.7.2")
                implementation("org.slf4j:slf4j-api:2.0.6")
                implementation("org.slf4j:slf4j-simple:2.0.6")
                implementation("ch.qos.logback:logback-core:1.4.5")
            }
        }
        val backendTest by getting
        val frontendMain by getting {
            dependencies {
                implementation("org.jetbrains.kotlin-wrappers:kotlin-react:18.2.0-pre.346")
                implementation("org.jetbrains.kotlin-wrappers:kotlin-react-dom:18.2.0-pre.346")
                implementation("org.jetbrains.kotlin-wrappers:kotlin-emotion:11.9.3-pre.346")
                implementation("org.jetbrains.kotlin-wrappers:kotlin-react-router-dom:6.3.0-pre.346")
            }
        }
        val frontendTest by getting
    }
}

application {
    applicationDefaultJvmArgs = listOf("-Dio.ktor.development=true")
    mainClass.set("de.splitframe.application.ServerKt")
}

tasks.named<Copy>("backendProcessResources") {
    val frontendBrowserDistribution = tasks.named("frontendBrowserDistribution")
    from(frontendBrowserDistribution)
}

tasks.named<JavaExec>("run") {
    dependsOn(tasks.named<Jar>("backendJar"))
    classpath(tasks.named<Jar>("backendJar"))
}

项目结构说明 #

webpack.config.d文件夹与src目录同级，内部包含webpack.config.js文件。

补充发现 #

配置文件已被导出到build目录中，但修改内容未生效。

解决方案 #

经排查，问题根源有两点：

1. 确保webpack.config.d文件夹与src同级（已满足）；
2. 常规Webpack的module.exports写法不适用于Kotlin Multiplatform场景，需通过函数修改框架生成的现有config对象，正确配置如下：

;(function(config) {
    config.mode = 'development'
    config.devServer = {
        port: 8088
    }
})(config);

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