Loadable-components: Support "on the fly" public path definitions from webpack

[ryanboswell]

🐛 Bug Report

When using Webpack's "on the fly" definition of the public path, the loadable paths don't match.
https://webpack.js.org/guides/public-path/

In this usage, the publicPath property isn't defined in the webpack file but instead in a global variable read at runtime, but loadable seems to expect a hard-coded public path that gets copied into loadable-stats.json. So when the "on the fly" method is used, the public path that loadable uses ends up empty and the files aren't referenced properly.

To Reproduce

Steps to reproduce the behavior:

Follow Webpack's instructions to use the "on the fly" public path definition, and do not include publicPath as an option in the webpack config file: https://webpack.js.org/guides/public-path/

In our case we include a fully qualified CDN URL and a version, both pulled from environment variables only available at runtime:

__webpack_public_path__ = "https://cdn.example.org/assets/1.2.3/"

After this, using one of the methods like extractor.getScriptTags(); outputs something like this:

<script async data-chunk="~options-page" src="/~options-page.bundle.js"></script>
<script async data-chunk="main" src="/vendors-main.bundle.js"></script>
<script async data-chunk="main" src="/main.bundle.js"></script>

Expected behavior

With the webpack public path configuration as outlined above, we'd expect the script tags to be generated as:

<script async data-chunk="~options-page" src="https://cdn.example.org/assets/1.2.3/~options-page.bundle.js"></script>
<script async data-chunk="main" src="https://cdn.example.org/assets/1.2.3/vendors-main.bundle.js"></script>
<script async data-chunk="main" src="https://cdn.example.org/assets/1.2.3/main.bundle.js"></script>

Env info

## System:
 - OS: macOS 10.14.3
 - CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
 - Memory: 81.94 MB / 16.00 GB
 - Shell: 3.2.57 - /bin/bash
## Binaries:
 - Node: 10.15.0 - /usr/local/bin/node
 - Yarn: 1.10.1 - /usr/local/bin/yarn
 - npm: 6.4.1 - /usr/local/bin/npm
## npmPackages:
 - @loadable/babel-plugin: 5.5.0 => 5.5.0 
 - @loadable/component: 5.5.0 => 5.5.0 
 - @loadable/server: 5.3.0 => 5.3.0 
 - @loadable/webpack-plugin: 5.5.0 => 5.5.0 

[gregberge]

Hello @ryanboswell, yes this option is currently not supported. Any help to fix it is welcome!

[BRKalow]

Hey @ryanboswell I've added support for passing in publicPath to ChunkExtractor here: https://github.com/smooth-code/loadable-components/pull/292