I would like to upgrade the minesweeper web app which are developed 2019. I could not remember how the development goes far. I started to upgrade Gradle build system and read some articles about Gradle, kotlin multiplatform plugin. It remind me a question about kotlin generating javascript sequence. When I released first the app, I did not understand the process well. I thought that it was the time to study about the multiplatform plugin.
I read some documents and understand that the process was composed with webpack. If you start to run the script build.gradle, the build process run webpack at “jsBrowserProductionWebpack” task. If you did not write any lines related webpack in build.gradle, you had a simple entry file which is your main app javascript file. The app javascript file is already linked with your other classes in src directory. Why do I line already linked app javascript? I have to link with third party javascript modules which are declared in kotlin source with JSanotation. I understood that “webpack” ran in “build/js/packages/<app>” directory. The webpack.config.js was generated at this directory by multi-platform plugin.
In kotlin multiplatform plugin, You can not write webpack.config.js directly. You can write some javascript in webpack.config.d directory. If you have some javascript source files in it, kotlin multiplatform plugin concatenate and inject them into webpack.config.js at the app directory.
I would like to have all of assets with one build command. The initial “jsProductionWebpack” do link kotlin.js only. I wrote some javascript lines to achieve to have all of assets.
I was newbie about the webpack, I learn it step by step. I knew it can generate file with hash number itself. It was reasonable for me to make a file name with hashed number. But it difficult to insert the hashed file name into my webpage script tag. Because the hash will be change every time you change source code. I needed some automate tools to insert the hashed file name into webpage. I needed HtmlWebpackPlugin to solve it. HtmlWebpackPlugin is insert script tag into a ejs template. I wanted to use my php webpage template as ejs template. I had a problem about this. My ejs template is located in a directory in project src directory. the webpack run on project/build/js/packages directory. How do I notify the webpack about my ejs template location ? I had to specify my template fullpath which are changed by every setting up project. I had to set my ejs template fullpath when I run gradle build. Webpack configuration was generated on the building time by Gradle. I have to control webpack with Gradle build script. The kotlin multiplatform plugin did not offer the standard way to control webpack for my request. I had a javascript in “webpack.config.d” to find my template location when it was evaluated.
I had some problems to complete my site with only webpack tasks, but I would like to write them in another posts.