Kotlin/JS webpack dev server proxy 설정

저번에 글 쓰다가 KT-67444 에 대해서 왜 마스터에 머지는 되었는데 2.0.0 빌드에는 포함이 안되었는지 매우 화난다고 썼었다. 그래서 우회방법이 없나 찾아봤는데 도저히 못찾겠어서 Chat GPT에게 물어보니 바로 가르쳐줬다.

build.gradle.kts 에서 commonWebpackConfig 에 넘기는 액션 내에서 configDirectory를 설정할 수 있다. 이 값이 null이 아니면 해당 디렉터리 내에 있는 JS파일을 webpack.config.js에서 설정을 export하기 바로 직전에 추가해준다. 가령

kotlin {
    js {
        binaries.executable()
        browser {
            commonWebpackConfig {
                cssSupport {
                    enabled = true
                }
                devServer?.apply {
                    open = false
                    port = 3000
                }
                configDirectory = project.layout.projectDirectory.dir("webpack.config.d").asFile
                outputFileName = "static/js/app.js"
            }
        }
    }
  // [...] 중략
}

으로 설정해놓고 src 디렉터리와 같은 뎁스에 webpack.config.d 라는 디렉터리를 만들어서 그 안에 proxy.config.js 파일을 만들어서 아래와 같이 작성해둔다.

config.devServer = config.devServer || {};
config.devServer.proxy = [
    {
        context: ["/api"],
        target: "http://localhost:8080"
    }
]

그러면 실제 webpack.config.js에 아래와 같이 추가해준다.

실제로 작동도 잘 된다. 굿. Proxy 타입 바뀌기 전까지는 이렇게 쓰면 될듯

끗.


버전 몇부터인지는 모르겠는데 2.0.20? 정도부터 KotlinWebpackConfig.DevServer.Proxy 가 추가되어서 그걸 이용하면 된다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다