Hi, I want to use the html-loader module in webpac...

# javascript

[Wyatt Kennedy]

Hi, I want to use the html-loader module in webpack to load an html file into a string constant. I added a webpack.config.d directory to the root of my kotlin js project and confirmed that the js file in there was included in the generated webpack.config.js in {projectRoot}/build/js/packages/{projectName} on browserDevelopmentRun . From here, I am not sure where to put my html files or how I should configure webpack to find the html files in the src directory of my kotlin project. Does anyone have any experience with this?

[Wyatt Kennedy]

I suppose the real question is, how do I get the path to my project from within that js file extension to put in a resolve module?

[turansky]

You can configure processResources* task to copy html files in required folder

[Wyatt Kennedy]

Do you know where I would copy them to?

[Wyatt Kennedy]

so that webpack will know where to find them?

[turansky]

One more option - webpack plugin (examples inside project)

[Wyatt Kennedy]

That plugin worked perfectly for me thank you. If anyone searches this, I basically just used that plugin like so and html files were resolved just fine

patchWebpackConfig {
    this.patch("""
        config.module.rules.push({
           test: /\.html$/i,
           loader: 'html-loader'
        })
        
        config.resolve.modules.unshift("${project.projectDir.resolve("./src/main/kotlin/").normalize().toString().replace("\\", "\\\\")}")
    """.trimIndent())
}

[turansky]

Second part won’t be required if you will use src/main/resources folder for templates

[Wyatt Kennedy]

Saw that but the downside there is those resources get copied and added to the distribution. Only needed their contents embedded in the output file.