I had ended up doing some refactoring around routes to allow for code splitting but following the react/webpack instructions I've still got just the 2 entry bundles being generated.
Index.tsx
import React from "react"
import { render } from "react-dom"
import { Provider } from "react-redux"
import { store } from "services/configureStore"
import { ConnectedApp } from "src/App"
import { ConnectedFeatureToggleProvider } from "./components/AppWrapper/FeatureToggleProvider"
const renderApp = () => {
render(
<Provider store={store}>
<ConnectedFeatureToggleProvider>
<ConnectedApp />
</ConnectedFeatureToggleProvider>
</Provider>,
document.querySelector("#app"),
)
}
// run app when FIT Core functions are ready
window.onFitCoreReady = () => {
renderApp()
}
App.tsx
import React, { useEffect, Suspense } from "react"
import { hot } from "react-hot-loader/root"
import { connect } from "react-redux"
import { Switch, Redirect, Route, Router } from "react-router-dom"
// import { ConnectedEconomyManager } from "modules/economyManager/EconomyManager"
import { ConnectedPlayerAccounts } from "modules/playerAccountDataManager/PlayerAccounts"
import { HealthDashboard } from "modules/healthDashboard/HealthDashboard"
import { PackSimulator } from "modules/packSimulator/PackSimulator"
const mapStateToProps = (state: GlobalState) => ({
...
})
const mapDispatchToProps = (dispatch: Dispatch) => ({
...
})
type Props = {
}
const ConnectedEconomyManager = React.lazy(() => import("modules/economyManager/EconomyManager"))
export const App = ({
}: Props) => {
return (
<Router history={history}>
<Suspense fallback={<span>LOADING LOADING LOADING</span>}>
<Switch>
<Redirect
exact
from="/marketplace/"
to={{
pathname: "/marketplace/economy",
search: window.location.search,
}}
/>
<Route path="/marketplace/economy" component={ConnectedEconomyManager} />
<Route path="/marketplace/playerAccounts" component={ConnectedPlayerAccounts} />
<Route path="/marketplace/health" component={HealthDashboard} />
<Route path="/marketplace/packSimulator" component={PackSimulator} />
</Switch>
</Suspense>
</Router>
)
}
export const ConnectedApp = hot(connect(mapStateToProps, mapDispatchToProps)(App))
webpack/local.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const merge = require('webpack-merge');
const _ = require('lodash');
const common = require('./common');
const path = require('path');
const open = process.env.npm_package_config_WEBPACK_OPEN_WINDOW === 'true';
const host = process.env.npm_package_config_WEBPACK_LOCAL_HOST;
const port = process.env.npm_package_config_WEBPACK_PORT;
const ROOT_DIR = path.resolve(__dirname, '../');
const APP_DIR = path.resolve(ROOT_DIR, 'src');
module.exports = env => {
if (!env) {
// Prevent references to 'undefined'
env = {};
}
return merge.smart(common, {
mode: 'development',
devServer: {
disableHostCheck: true,
port: '443',
historyApiFallback: true,
open: open ? 'Google Chrome' : open, // auto-open in browser
openPage: 'marketplace/economy?project=' + projectName,
},
devtool: 'eval-source-map',
module: {
rules: [
_.merge(
_.find(common.module.rules, rule => rule.use && rule.use.loader === 'babel-loader'),
{ use: { options: { plugins: ['@babel/plugin-syntax-dynamic-import', 'babel-plugin-styled-components', '@babel/plugin-proposal-class-properties'] } } }
),
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
],
},
plugins: [
// copies the index.html file to the build directory:
new HtmlWebpackPlugin({
template: `${APP_DIR}/index.html`,
templateParameters: {
...define
}
}),
],
});
}
webpack/common.js
const path = require('path');
const webpack = require('webpack');
const ROOT_DIR = path.resolve(__dirname, '../');
const BUILD_DIR = path.resolve(ROOT_DIR, 'dist');
const APP_DIR = path.resolve(ROOT_DIR, 'src');
module.exports = {
entry: {
main: [
`${APP_DIR}/index.tsx`, // main entry point to the application
],
semantic: path.resolve(ROOT_DIR, 'semantic-theme', 'semantic.less'),
},
module: {
rules: [
{
test: /\.[j|t]sx?$/,
use: {
loader: 'babel-loader',
options: {
presets: [['@babel/preset-env', { useBuiltIns: 'entry', corejs: '3.0.0' }], '@babel/preset-react'],
overrides: [
{
test: /\.tsx?$/,
presets: [['@babel/preset-env', { useBuiltIns: 'entry', corejs: '3.0.0' }], '@babel/preset-react', '@babel/preset-typescript'],
},
],
},
},
include: APP_DIR,
},names
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: 'url-loader?limit=10000&mimetype=application/font-woff',
},
{
test: /\.(ttf|otf|eot|svg|png|jpe?g|gif)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: 'file-loader',
},
],
},
output: {
path: `${BUILD_DIR}`,
filename: '[name].[hash].js',
chunkFilename: '[name].[hash].js',
publicPath: '/',
},
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
modules: [
ROOT_DIR,
APP_DIR,
'node_modules',
],
alias: {
// tell semantic-ui-less to use our theme config
'../../theme.config$': path.resolve(ROOT_DIR, 'semantic-theme', 'theme.config'),
'react-dom': '@hot-loader/react-dom',
},
},
stats: { colors: true },
};
tsconfig.json
{
"compilerOptions": {
"plugins": [
{
"name": "typescript-styled-plugin"
}
],
"noEmit": true,
"strict": true,
"sourceMap": true,
"noImplicitAny": false,
"noUnusedLocals": true,
"module": "esnext",
"target": "esnext",
"lib": [
"esnext",
"dom"
],
"moduleResolution": "node",
"jsx": "preserve",
"allowSyntheticDefaultImports": true,
"resolveJsonModule": true,
"baseUrl": ".",
"paths": {
"components/*": ["src/components/*"],
"modules/*": ["src/modules/*"],
"services/*": ["src/services/*"],
},
"types": [
"react",
"jest",
]
},
"include": [
"./src/**/*",
"./@types/**/*",
],
}
I expected a new chunk to be generated for the EconomyManager lazy import but the build only generates a main.[hash].js and semantic.[hash].js. Where am I going wrong here?
I checked and EconomyManager exports are not being referenced anywhere else in the application as I thought that might be it.