In 1.4-rc, how do I change the js output filename?...

# javascript

[Nicholas Bilyk]

In 1.4-rc, how do I change the js output filename? I don't want to change the module name, I want to append the version to the filename for cache busting reasons.

[Nicholas Bilyk]

It's kind of strange though, my server is sending proper etag headers and chrome doesn't have any problems when I refresh the page, it's just Safari that doesn't seem to care that the js file has updated. I don't know if this is a common problem...

[Brandon Saunders]

can you do that in your webpack configuration? https://webpack.js.org/guides/caching/

[Nicholas Bilyk]

I can get the output file name to change using that: config.output.filename = "[name].[contenthash].js";

But I find webpack + kotlin extremely difficult to use. The pathing and syntax is very different from the webpack examples and documentation and the debugging provides nothing useful.
A seemingly simple task like doing a token replacement in my index.html file has me floundering for hours.
I got HtmlWebpackPlugin working via npm, but I don't know how to get the pathing right and debugging just gives me "IllegalStateExceptions"
Rawr

[Nicholas Bilyk]

Well, I'm really close now, but still don't know how pathing works in the webpack.config.d files...

let HtmlWebpackPlugin = require("html-webpack-plugin");

config.output.filename = "[name].[contenthash].js";

config.plugins.push(
   new HtmlWebpackPlugin({
      template: 'D:\\my-absolute-path-works\\index.ejs'
   })
);

[Nicholas Bilyk]

also if anybody knows of a better way to debug webpack + kotlin I'd love to hear it. Right now if anything is off it's just illegal state exceptions with no message...

[bashor]

cc @Ilya Goncharov [JB]

[Ilya Goncharov [JB]]

It works exactly as in pure webpack, because it is injected in webpack.config.js
The only problem, that if you have template in your resources folder, and you have multi module project, you need to set path from webpack working directory to this resources
In this script you can use path module of node.js

const path = require(‘path’)
tenplate = path.resolve(__dirname, <relative-path-to-template>) //__dirname = build/js/packages/module-name

[Nicholas Bilyk]

Hi Ilya, thanks for trying to help. Yes, I have a multi-module project. I don't understand how this helps; build/js/packages/module-name never includes any of my resources. Where would I put my template for that to work?

Also, any advice on debugging?
"java.lang.IllegalStateException (no error message)" isn't very helpful, and no way I know of to add console messages

[Ilya Goncharov [JB]]

Your resources are located in <module>/build/processedResources
So you write something like that and it get path to processedResources folder

path.resolve(__dirname, "../../../../module/build/processedResources")

In which case you get IllegalStateException w/o message? Could you please send stacktrace?
It can be done with ./gradlew … --stacktrace

[Nicholas Bilyk]

Ick.. I was afraid you'd say that. That doesn't sound very stable, hardcoded module name and build directories.

I get IllegalStateException on almost every error. In this case, if the template cannot be found.

https://gist.github.com/nbilyk/90bb9b51f05b05a3e392378cc44f5e1d

[Nicholas Bilyk]

Ok, for posterity, currently this is what one has to do to make your js file include a content hash in the name.

1) Add html-webpack-plugin as a dependency:

dependencies {
	compileOnly(devNpm("html-webpack-plugin", version = "4.3.0"))
}

2) In your project root, add a webpack.config.d folder

3) In your project's resources directory add an index.html without a <script> element for your main js.

4) Add a webpack.config.d/config.js file with the contents:

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

config.output.filename = "[name].[contenthash].js";

config.plugins.push(
	new HtmlWebpackPlugin({
		template: path.resolve(__dirname, "../../../../your-module-name/build/processedResources/js/main/index.html")
	})
);

[Ilya Goncharov [JB]]

Are you sure, that you need hmtl-webpack-plugin ? Seems that if index.html is plain html, you can use just index.html without this plugin

[Nicholas Bilyk]

Without the html webpack plugin how would I dynamically change the script src to the output filename when it changes based on content?

[Ilya Goncharov [JB]]

Yes, you are right