React-loadable gets chunks only from relative path

Question

I'm using webpack 4.6.0 and babel 7.0.0 to build react 16.3 web app.

My js assets are under https: //domain/js/app.bundle.js

I use react-loadable to split components into chunks. The chunks are also located under /js/, however, react fetches them from the relative path, that is:

https: //domain/1.app.bundle.js

which of course doesn't work.

Question: How do I tell react or webpack to use the absolute path /js/ for fetching chunks?

Here is my webpack.config.json

var path = require('path');

module.exports = {
    mode: 'production',
    devtool: 'eval-source-map',
    entry: './js/src/app.js',
    watch: false,
    watchOptions: {
        aggregateTimeout: 300,
        poll: 1000,
        ignored: /node_modules/
    },
    output: {
        path: path.resolve(__dirname, "output/js"),
        filename: 'app.bundle.js',
        chunkFilename: '[name].app.bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: path.resolve(__dirname, "js/src"),
                query: {
                    presets: ['@babel/preset-react'],//, 'es2015'],
                    plugins: [
                        'transform-class-properties',
                        '@babel/plugin-syntax-dynamic-import'
                    ]
                }
            },
            {
                test: /\.scss$/,
                include: path.resolve(__dirname, "sass"),
                loaders: ['style', 'css', 'sass']
            }
        ]
    }
};

And here are the packages i have in package.json

    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@material-ui/core": "^3.0.3",
    "@material-ui/icons": "^3.0.1",
    "@babel/cli": "^7.0.0",
    "@babel/core": "^7.0.1",
    "babel-loader": "^8.0.2",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-es2015": "^6.9.0",
    "@babel/preset-react": "^7.0.0",
    "node-sass": "^4.9.2",
    "react": "^16.3.2",
    "react-addons-css-transition-group": "^15.6.2",
    "react-dom": "^16.3.2",
    "react-loadable": "^5.5.0",
    "react-swipeable-views": "^0.12.13",
    "react-tap-event-plugin": "^3.0.3",
    "scss-compile": "^0.1.7",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.1.2",

And here is the react code that I changed to test the code splitting

import React from 'react';
import Loadable from 'react-loadable';

const PV = Loadable({
    loader: () => import('./PV/PV'),
    loading: () => <div>Loading...</div>,
});

Answer 1

Solved

output: {
    path: path.resolve(__dirname, "output/js"),
    filename: 'app.bundle.js',
    chunkFilename: '[name].app.bundle.js',
    publicPath: '/js/'  <------------------ this was the missing piece.
},