Fix incorrect webpack devTool value

[rktjmp]

I have been trying to get source maps to work with Phoenix, and I noticed that the default devTool option is incorrect, I think?

phoenix/installer/templates/phx_assets/webpack.config.js

Line 27 in c8883af

devtool: devMode ? 'eval-cheap-module-source-map' : undefined,

It seems that it's set to a webpack 5 value, while Phoenix still uses webpack 4.

WP5: https://webpack.js.org/configuration/devtool/#devtool, has eval-cheap-module-source-map.

WP4: https://v4.webpack.js.org/configuration/devtool/#devtool, no eval-cheap-module-source-map option, perhaps intended to use cheap-module-eval-source-map?

The weird thing is that I was still seeing source maps like behaviour in the browser, maybe webpack defaults to a safe value if it doesn't recognise the key?

At any rate, I wasn't actually able to click though to code lines without setting the value to eval-source-map (that is, setting it to the maybe-intended value, cheap-module-eval-source-map, didn't seem useful).

The webpack docs listed as "fast", vs "faster", but no real indication of exactly how much faster. I certainly couldn't tell between them but I don't have multi MB of JS.

eval-source-map seems like a good pick by the docs:

https://v4.webpack.js.org/configuration/devtool/#development

eval-source-map - Each module is executed with eval() and a SourceMap is added as a DataUrl to the eval(). Initially it is slow, but it provides fast rebuild speed and yields real files. Line numbers are correctly mapped since it gets mapped to the original code. It yields the best quality SourceMaps for development.

[rktjmp]

Actually there seems to be a bug in Firefox, where it's very temperamental about source maps.

• setting to eval works in ffx, chrome
• setting to any-garbage, works in ffx, chrome (seems some people think this would fallback to eval)
• setting to eval-cheap-module-source-map doesn't work in ffx, even though the key doesn't exist in the docs, it should be the same as any-garbage.

I am restarting mix phx.server, clearing priv/static/js between edits to webpack.config.js and restarting the (cacheless) browser, but I don't know enough about how everything fits together, maybe some files are getting left around, maybe the whole thing is haunted 👻.

Even between browser restarts, the first "console log to JS file" click sometimes takes you to a well-mapped file, then fails on repeated clicks 👍.

It's really unclear to me what a good default value is. By the doc,

eval - Each module is executed with eval() and //@ sourceURL. This is pretty fast. The main disadvantage is that it doesn't display line numbers correctly since it gets mapped to transpiled code instead of the original code (No Source Maps from Loaders).

But I do see line numbers correctly, so... 🤷

I can't really say it this PR is any good, only that the current value isn't technically in the docs but maybe that doesn't matter.

[rktjmp]

Would be fixed "for free" in #4054, so probably :ok to close this.

[Gazler]

Thanks for the detailed report. To clarify on the config options. Webpack checks for the inclusion of "cheap", "eval", etc. So the order doesn't really matter.

https://github.com/webpack/webpack/blob/444e59f8a427f94f0064cae6765e5a3c4b78596d/lib/WebpackOptionsApply.js#L235

This order is now enforced via a regex in Webpack 5 though, which means that the current option is more future proof.

https://github.com/webpack/webpack/blob/3b8d26df1e314bab4b0b481675995dd7a2c765c8/schemas/WebpackOptions.json#L358

devtool = new RegExp(/^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$/);
["cheap-eval-module-source-map".match(devtool) === null, "eval-cheap-module-source-map".match(devtool) === null]
// [true, false]