What is wrong with my webpack multiplatform projec...

# multiplatform

[Gunslingor]

What is wrong with my webpack multiplatform project code, I don't think the dependcies like three.js are getting packed.

js("frontend") {
    browser {
        tasks {
            register<Exec>("webpack") {
                dependsOn("yarn", "npmInstall")
                //outputs.dir("$buildDir\\yyy\\")

                commandLine("$buildDir\\js\\node_modules\\.bin\\webpack", "$buildDir\\js\\packages_imported\\kotlin\\1.3.70\\kotlin.js", "$buildDir\\js\\packages_imported\\three.js\\71.0.0-r\\three.js")
                //, "$buildDir\\js\\packages_imported\\kotlin\\1.3.70\\kotlin.js", "$buildDir\\js\\packages_imported\\three.js\\71.0.0-r\\three.js"
            }
        }
    }
}

[Gunslingor]

build.gradle.kts

[Gunslingor]

webpack.config.evaluated.js

[Robert Jaros]

why do you use three.js from webjars instead of npm dependency?

[Robert Jaros]

implementation(npm("three.js")) should work without all this configuration options

[Gunslingor]

I actually tried that with adding three to

dependsOn("yarn", "npmInstall")

I think it worked to download them. to be honest I'm not comfortable with node most out of all these technologies even the new multiplatform stuff. I actually can't seem to comprehend how I should/want-to use it... ktor seems fine but I don't understand how I would use it with node.js if I'm using Kotlin JS... nodes purpose is to write server side in javascript, Kotlin JS's purpose is to avoid JS alltogether IMHO and ktor has its own services and framework. Bottom line I'm trying to setup the architecture of a full stack Kotlin (mostly/only) project using ktor and node SEEMS to be a requirement? I've been struggling with all this stuff.. could use a code review... and a tutor =)

[Robert Jaros]

yarn, npm and webpack all work with nodejs, to it is a requirement

[Robert Jaros]

but it's hidden under the gradle tasks

[Gunslingor]

it seems to take me 30 hours to solve each gradle issue I stumble over... I've been trying to make a webpack for a week now... I could've done it manually by now, lol

[Gunslingor]

I need ktor to server it up... ktor is serving up the project js file in distributions but I don't think it has three.js or other dependancies in it

[Gunslingor]

Also really confused about Soooo many files and folders in the build dir; I've learned what a lot of this stuff is and suspect the majority of it shouldn't end up in customer facing software... so what's the process of taking all this stuff in the build dir and turning it into customer facing software packages, installation packages, server/client side versions, etc...

[Robert Jaros]

this is one of the simple examples of multiplatform projects with ktor on the backend: https://github.com/hannespernpeintner/kotlin-minimal-jvm-js

[Robert Jaros]

you can also look at kvision ktor template (but it's more complicated because of additional build tasks): https://github.com/rjaros/kvision-examples/tree/master/template-fullstack-ktor

[Robert Jaros]

imho you should definitely go back to npm() dependency and use what is already implemented in kotlin/js plugin

[Gunslingor]

Thank you, I ment to look into kvision and I haven't seen that example, thought I saw them all by now, lol. Can you confirm that my webpack out doesn't contain the dependancies? I don't know for sure, just based on webpack.config.evaluated.js and I served the output for three and didn't see the keyword anywhere

[Gunslingor]

Wow, that's you on the bottom on the page, what are the odd!

https://dev.to/rjaros/an-introduction-to-kvision-39i1

[Gunslingor]

js("frontend") {
    browser {
        nodejs {
            webpackTask {
                println("WEBPACKAGINGss")
                configure<> {  }
            }
        }/
    }
}

I'm getting close with this I suspect... I think you need a webpack.config.js file to make this work traditionally, but that gets generated by gradle when it creates node so there has to be a way to configure it in gradle like this right?

[Robert Jaros]

you can add some *.js files to webpack.config.d directory - their content will be added to the generated webpack.config.js file

[Gunslingor]

But those files are already in node_modules. I'd prefer to do this without another root dir or root file

[Robert Jaros]

That's the way to configure webpack at the moment. I don't think there is an alternative way.

[Gunslingor]

I'm able to

setProperty("mode", "development")

and it propagates to the gradle created js/packages/project/webpack.config.js file, but I can't fiugure out how to make it modify the resolve.modules object which I suspect is what is needed to make this work... it seems to default to ["node_modules"] which does have everything... hmmm, maybe I just need to add an entry object somehow

[Gunslingor]

js("frontend") {
    browser {
        nodejs {
            webpackTask {
                println("WEBPACKAGINGss")
                setProperty("mode", "development")
                setProperty("resolve") {
                    setProperty("modules", {"TEST"})
                }
                configure<Entry> {  }
            }
        }
    }
}

the experiuments

[Gunslingor]

// resolve modules
config.resolve.modules.unshift("C:\\Users\\gunsl\\IdeaProjects\\FL\\build\\js\\packages\\FL-frontend\\kotlin-dce")
config.resolve.modules.unshift("C:\\Users\\gunsl\\IdeaProjects\\FL\\build\\js\\packages_imported")

Is this right?

[Gunslingor]

So this is wierd, I decided to go around the problem for a little while and start programming with three.js, so I downloaded and attempted to start using three-js-wrapper project... guess what, the wrapper seems to do fine... makes it to the dce folder and the final webpack but the webpack is STILL missing three.js.

[Gunslingor]

I'm starting to think it has something to do with the . in three.js; thats the only distinction I see between it and other packages.