React & Webpack 4 - lazy loading - can't get to generate chunk files - reactjs

Question

I am hoping someone can direct me on this issue. I am trying to setup lazy loading with react 16 & webpack 4. I followed the guides and duplicated the .babelrc, webpack config files to match the other examples where this is working. However i can't get chunk files to be generated with my project.
I am also running an express server (api) and launch both webpack dev server and express server from using nodemon:
"scripts": {
"start": "node index.js",
"server": "nodemon index.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\""
},
Here is the output when webpack is compiling bundle.js.
i ｢wds｣: 404s will fallback to /index.html
i ｢wdm｣: wait until bundle finished: /
i ｢wdm｣: Hash: a0bec46949ac77f6330c
Version: webpack 4.12.0
Time: 2782ms
Built at: 2018-09-05 22:59:39
Asset Size Chunks Chunk Names
bundle.js 4.01 MiB main [emitted] main
index.html 577 bytes [emitted]
Entrypoint main = bundle.js
Here is my .babelrc config:
{
"presets": [
[
"env",
{
"targets": {
"browsers": ["> 1%", "last 2 versions"]
}
}
],
"stage-2",
"react"
],
"plugins": ["syntax-dynamic-import", "transform-class-properties"]
}
Here is the webpack.config.js
const path = require('path');
const autoprefixer = require('autoprefixer');
const HtmlWebpacPlugin = require('html-webpack-plugin');
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
chunkFilename: '[id].chunk.js',
publicPath: ''
},
resolve: {
extensions: ['.js', 'jsx']
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css/,
exclude: /node_modules/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
autoprefixer({
browsers: ['> 1%', 'last 2 versions']
})
]
}
}
]
},
{
test: /\.(png|jpe?g|gif)$/,
loader: 'url-loader?limit=8000&name=images/[name].[ext]'
}
]
},
plugins: [
new HtmlWebpacPlugin({
template: __dirname + '/src/index.html',
filename: 'index.html',
inject: 'body'
})
],
devServer: {
historyApiFallback: true,
proxy: {
'/api': 'http://localhost:4000'
}
}
};
Package.json
{
"name": "react_webpack_starter",
"version": "1.0.0",
"description": "Boilerplate React & Webpac",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --open --hot --port 3000",
"build": "webpack --mode production"
},
"license": "ISC",
"dependencies": {
"axios": "^0.18.0",
"jwt-decode": "^2.2.0",
"moment": "^2.22.2",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-moment": "^0.7.7",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"autoprefixer": "^9.1.5",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^0.28.11",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"postcss-loader": "^3.0.0",
"style-loader": "^0.21.0",
"url-loader": "^1.1.1",
"webpack": "^4.12.0",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4"
},
"proxy": "http://localhost:4000"
}
Async Component
import React, { Component } from 'react';
const asyncComponent = importComponent => {
return class extends Component {
state = {
component: null
};
componentDidMount() {
importComponent().then(cmp => {
this.setState({ component: cmp.default });
});
}
render() {
const C = this.state.component;
return C ? <C {...this.props} /> : null;
}
};
};
export default asyncComponent;
Code snippet
import asyncComponent from './HOC/asyncComponent';
const asyncTest = asyncComponent(() => {
return import('./Auth/Signup/Signup');
});
class App extends Component {
render() {
return (
<Provider store={store}>
<Router>
<div className={styles.container}>
<Switch>
<Route path="/test" component={asyncTest} />
<Route path="/test2" component={asyncTest} />
<Route path="/test3" component={asyncTest} />
<Route path="/test4" component={asyncTest} />
</Switch>
</div>
</Router>
</Provider>
);
}
}