Do anybody have a build sample with new mpp with webpack bundle?

# multiplatform

[altavir]

Do anybody have a build sample with new mpp with webpack bundle?

[snrostov]

Webpack bundle should work without configuration out of the box. Just add browser() inside js { } target preset. ./gradlew build will build js bundle into build/distributions folder.

Sample project can be created with wizard:
- Gradle -> Kotlin/JS for browser (don’t forget to uncheck Java). Also in the resulting project you can just ./gradlew run to start webpack dev server and open page in browser.
- Kotlin -> JS Client and JVM Server | Gradle will create project with ktor and js frontend.

Same sample here: https://github.com/ktorio/ktor-samples/tree/master/mpp/fullstack-mpp

[altavir]

The example does not include dce. Is it possible to use it with mpp?

[snrostov]

currently it is not supported. https://youtrack.jetbrains.com/issue/KT-32323

[altavir]

OK then, I will try to use webpack production mode then. I guess that webpack run mode is also not supported?

[snrostov]

yes, there is no such option in webpack task yet, but as a workaround you can add custom configuration in webpack.config.d/mode.js with this contents:

config.mode = 'production'

[altavir]

thanks

[altavir]

For some reason it embeds source map even if I ask not to do so...

[snrostov]

You mean source maps?

[altavir]

yes. The resulting js weights 11 Mb and has source maps embedded. I will try clean build

[snrostov]

yes, it is enabled by default. you can disable it by setting sourceMaps = false in webpackTask {}

[altavir]

does not work with groovy configuration.

[snrostov]

looks like a bug, will check. please fill issue if you can

[snrostov]

It works for me:

kotlin {
    target {
        browser {
            webpackTask {
                sourceMaps = false
            }

Can you please show your build.gradle?

[altavir]

You seem to be using kotlin-js plugin. I am talking about mpp:

kotlin {
    jvm {
        withJava()
        compilations.all {
            kotlinOptions {
                jvmTarget = "1.8"
            }
        }
    }

    js {
        browser()
        compilations.all {
            kotlinOptions {
                sourceMap = true
                sourceMapEmbedSources = "always"
                moduleKind = "commonjs"
            }
        }
    }

[snrostov]

It works with mpp too:

kotlin {
    js {
        browser {
            webpackTask {
                sourceMaps = false
            }

[altavir]

Let me check it again

[snrostov]

note: sourceMapEmbedSources = "always" is not required

[snrostov]

sourceMap = true is by default since 1.3.40

[snrostov]

and there is useCommonJs() shortcut that you can use instead of

compilations.all {
  kotlinOptions {
    moduleKind = "commonjs"

[altavir]

js {
        browser{
            webpackTask {
                sourceMaps = false
            }
        }
        compilations.all {
            kotlinOptions {
                moduleKind = "commonjs"
            }
        }
    }

A problem occurred evaluating root project 'bmn-scheduler-mp'.
> Could not set unknown property 'sourceMaps' for task ':jsBrowserTest' of type org.jetbrains.kotlin.gradle.targets.js.testing.KotlinJsTest.

[snrostov]

Ah, sorry, this is a bug that was fixed in my branch but not in 1.3.50-eap1. Will be fixed in eap2

[altavir]

OK. Can I configure the source maps directly through webpack configuration? 11 Mb bundle is not what I like to have

[snrostov]

You can add this at the bottom of script:

tasks {
    jsBrowserWebpack {
        sourceMaps = false
    }
}

[altavir]

OK, it worked. 3Mb is large but still better than 11 Mb. Kotlin stdlib seems to be taking the most of remaining buindle. Is it possible to apply dce manually?

[snrostov]

Yes, but it is too tricky.

[altavir]

OK. I will wait then. Do not need this one in production yet