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>,
});
Solved
output: {
path: path.resolve(__dirname, "output/js"),
filename: 'app.bundle.js',
chunkFilename: '[name].app.bundle.js',
publicPath: '/js/' <------------------ this was the missing piece.
},