I am trying utilise webpack code splitting. Everything looks like its working well, webpack splits the code correct, dependencies, pretty much as expected.
Except i can't get it to work with hot-module-replacement.
I successfully load 127.0.0.1:8009/main.js
But main.js is trying to load 127.0.0.1:8001/assets/1.chunk.js
Does it make sense? I must be missing something.
I'm running my node server at 127.0.0.1:8001 and the hot-middleware client at 127.0.0.1:8009
** main.js**
require.ensure([], function (require) {
var admin = require('./admin');
}, 'admin');
My Webpack config
const PATHS = {
root: __dirname,
client: path.join(__dirname, '../', 'browser', 'scripts'),
public: path.join(__dirname, '../', '../', 'public')
};
var webpackConfig = {
hotPort: process.env.PORT_HOT,
devtool: 'eval',
name: 'browser',
resolve: {
root: PATHS.root,
extensions: ['', '.js', '.jsx', '.styl'],
modulesDirectories: [
'node_modules',
PATHS.client,
],
},
entry: {
main: ['main', hotMiddlewareScript]
},
output: {
path: PATHS.public,
filename: '[name].js',
publicPath: '/assets/'
},
module: {
noParse: [
/lodash/
],
loaders: [
{
test: /\.js$|\.jsx$/,
exclude: /node_modules/,
loaders: ['babel']
}
},
};
Simple Hot Server
const app = express();
const compiler = webpack(webpackConfig);
app.use(webpackDev(compiler, {
noInfo: true,
publicPath: webpackConfig.output.publicPath
}));
app.use(webpackHot(compiler));
app.listen(webpackConfig.hotPort);
Setting the publicPath to hot-middleware client did it
output: {
path: PATHS.public,
filename: '[name].js',
chunkFilename: '[chunkhash].js',
publicPath: http://127.0.0.1:8009
}