For some reason after upgrading everything, I cannot get my webpack to split the code into chunks so my main js file is 5mb. Any ideas why this is not working? Below is a screenshot showing what the output is. The project is using aurelia, but I don't think that matter. Why isn't this splitting into multiple bundles based on the routes? This was working well in webpack 2 with the commonchunks plugin.

Here is my webpack config:

import { merge } from '@easy-webpack/core'; const webpack = require('webpack'); const DefinePlugin = require('webpack/lib/DefinePlugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const HappyPack = require('happypack'); const path = require("path"); const WebpackMd5Hash = require('webpack-md5-hash'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; const { AureliaPlugin, ModuleDependenciesPlugin } = require("aurelia-webpack-plugin"); const webpackPort = parseInt(process.env.WEBPACK_PORT) || 9000; const webpackHost = process.env.WEBPACK_HOST || 'localhost'; const ENV = process.env.NODE_ENV && process.env.NODE_ENV.toLowerCase() || (process.env.NODE_ENV = 'local'); const isHMR = process.argv.join('').indexOf('hot') > -1 || !!process.env.WEBPACK_HMR; const title = 'My Title'; const baseUrl = '/'; const rootDir = __dirname; const extractCSS = new ExtractTextPlugin({ "filename" : '[name]-css.css' }); const extractLESS = new ExtractTextPlugin({ "filename" : '[name]-less.css' }); let plugins = [ new HappyPack({ "id" : "css1", "loaders" : ['css-loader'] }), new HappyPack({ "id" : "css2", "loaders" : ['style-loader', 'css-loader'] }), new HappyPack({ "id" : "less1", "loaders" : ['css-loader', 'less-loader'] }), new HappyPack({ "id" : "less2", "loaders" : ['style-loader', 'css-loader', 'less-loader'] }), new HappyPack({ "id" : "ts", "threads" : 2, "loaders" : [{ "path" : "ts-loader", "query" : { happyPackMode: true } }] }), new HappyPack({ "id" : "js", "loaders" : ['babel-loader'] }), new AureliaPlugin(), new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.jQuery": "jquery", 'Promise': 'bluebird', }), new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), new ModuleDependenciesPlugin({ "au-table": [ './au-table', './au-table-pagination', './au-table-pagination.html', './au-table-select', './au-table-sort' ], "aurelia-authentication": ["./authFilterValueConverter", "./authenticatedFilterValueConverter", "./authenticatedValueConverter" ], "aurelia-mdl-plugin" : ['./mdl'], "aurelia-froala-editor": [ './froala-editor' ], }), //new HardSourceWebpackPlugin() ]; plugins.push(extractCSS); plugins.push(extractLESS); let base = { entry: { main: [ //'whatwg-fetch', 'aurelia-bootstrapper', ] }, output: { path: path.resolve(__dirname, "dist_"+process.env.NODE_ENV.toLowerCase()), publicPath: baseUrl, filename: (ENV === 'prod' || ENV === 'stage' || ENV === 'qa' || ENV === 'dev') ? '[name].[chunkhash].bundle.js' : '[name].[hash].bundle.js', sourceMapFilename: (ENV === 'prod' || ENV === 'stage' || ENV === 'qa' || ENV === 'dev') ? '[name].[chunkhash].bundle.map' : '[name].[hash].bundle.map', chunkFilename: (ENV === 'prod' || ENV === 'stage' || ENV === 'qa' || ENV === 'dev') ? '[name].[chunkhash].chunk.js' : '[name].[hash].chunk.js', }, resolve: { extensions: [".ts", ".js"], modules: ["src", "node_modules", 'kendo/js'], symlinks: false, }, module: { rules: [ { test: /\.css$/i, issuer: [{ not: [{ test: /\.html$/i }] }], use: (ENV !== 'local') ? extractCSS.extract({ fallback: 'style-loader', use: 'happypack/loader?id=css1', }) : 'happypack/loader?id=css2' }, { test: /\.css$/i, issuer: [{ test: /\.html$/i }], // CSS required in templates cannot be extracted safely // because Aurelia would try to require it again in runtime use: 'happypack/loader?id=css1' }, { test: /\.less$/i, use: (ENV !== 'local') ? extractLESS.extract({ fallback: 'style-loader', use: 'happypack/loader?id=less1', }) : 'happypack/loader?id=less2', issuer: { // only when the issuer is a .js/.ts file, so the loaders are not applied inside templates test: /\.[tj]s$/i, } }, { test: /\.ts$/i, use: 'happypack/loader?id=ts', include: path.resolve(__dirname, 'src'), exclude: /node_modules/ }, { test: /\.js$/, exclude: /(node_modules|bower_components|src)/, use: 'happypack/loader?id=js', }, { test: /\.html$/i, use: ["html-loader"] }, { test: /\.mp4$/, loader: 'url-loader?limit=100000&mimetype=video/mp4' }, { test: /\.ogv$/, loader: 'url-loader?limit=100000&mimetype=video/ogv' }, { test: /[\/\\]node_modules[\/\\]bluebird[\/\\].+\.js$/, loader: 'expose-loader?Promise' }, { test: /\.json$/, loader: 'json-loader' } ] }, plugins: plugins } const local = { mode: 'development', // output: { // filename: 'bundle.js', // }, devServer: { port: webpackPort, host: '0.0.0.0', historyApiFallback: true, watchOptions: { aggregateTimeout: 300, poll: 1000 }, }, } const production = { mode: 'production', devtool: '#source-map', plugins: [ new WebpackMd5Hash(), new BundleAnalyzerPlugin(), // new (webpack as any).LoaderOptionsPlugin({ // test: /\.html$/i, // minimize: true, // removeAttributeQuotes: false, // caseSensitive: true // }) ] } const variables = { plugins: [ new CleanWebpackPlugin(path.resolve(__dirname, "dist_"+process.env.NODE_ENV.toLowerCase()), {"verbose" : false}), // literally replaces all mentions of a given variable in your code with the given value new DefinePlugin({ ENV: JSON.stringify(ENV), HMR: isHMR, 'process.env': { NODE_ENV: JSON.stringify(ENV), HMR: isHMR, WEBPACK_PORT: JSON.stringify(webpackPort), WEBPACK_HOST: JSON.stringify(webpackHost), VERSION: JSON.stringify(process.env.npm_package_appversion), BUILD: JSON.stringify(process.env.npm_package_build), BRANCH: JSON.stringify(process.env.NODE_ENV.toLowerCase()) } }) ] } const fontsAndImages = { module: { rules: [ // embed small images and fonts as Data Urls and larger ones as files { test: /\.(png|gif|jpg)$/, loader: 'url-loader', options: { limit: 8192 } }, { test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff2' } }, { test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff' } }, { test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' }, ] } } const generateIndexHtml = { plugins: [ new HtmlWebpackPlugin({ template: 'index.ejs', chunksSortMode: 'dependency', minify: ENV === 'prod' ? { removeComments: true, collapseWhitespace: true } : undefined, metadata: { title, ENV, isHMR } }) ] } const copyFiles = { plugins: [ new CopyWebpackPlugin([ { from: 'favicon.png', to: 'favicon.png' }, { from: 'apple-touch-icon.png', to: 'apple-touch-icon.png' }, { from: 'manifest.json', to: 'manifest.json' }, { from: 'src/main.css', to: 'src/main.css' }, { from: 'images/**/*'}, { from: 'widget/**/*'}, { from: 'notifications-sw.js', to: 'notifications-sw.js' }, ]) ] } const config = merge( base, ENV === 'prod' || ENV === 'stage' || ENV === 'qa' || ENV === 'dev' ? production : local, variables, fontsAndImages, generateIndexHtml, ...( ENV === 'prod' || ENV === 'stage' || ENV === 'qa' || ENV === 'dev' ? [copyFiles] : [] ), ) module.exports = config;

Here is my app.ts:

import {AuthenticateStep} from 'aurelia-authentication'; import AppRoutes from './configs/routes'; import {inject} from 'aurelia-framework'; import { EventAggregator } from 'aurelia-event-aggregator'; import {Router, RouterConfiguration, Redirect} from 'aurelia-router'; import {AppState} from './resources/global/appState'; import {NotificationsInit} from './libs/notificationsInit'; import './resources/global/less/base/base.less'; import './resources/global/less/layout/layout.less'; import '../kendo/styles/web/kendo.common.less'; import '../kendo/styles/web/kendo.common-material.less'; import '../kendo/styles/web/kendo.material.less'; import './components/nonAppHeader/nonAppHeader.less'; @inject(AppState, Router, EventAggregator) export class App { router: Router; appState: any; eventAggregator: any; constructor(appState, router, eventAggregator) { this.router = router; this.appState = appState; this.eventAggregator = eventAggregator; if (this.appState.isLoggedIn) { new NotificationsInit(this.appState, this.eventAggregator); } } configureRouter(config: RouterConfiguration, router: Router) { var step = { run: (navigationInstruction, next) => { if(this.appState.isLoggedIn === true) { if (this.appState.userInfo.status !== 9 && navigationInstruction.config.settings.admin === true) { return next.cancel(new Redirect('treks')); } } else if (navigationInstruction.config.settings.admin === true) { return next.cancel(new Redirect('/')); } return next(); } }; config.addPreRenderStep(step); config.title = 'My site'; config.options.pushState = true; config.options.root = '/'; config.addPipelineStep('postcomplete', PostCompleteStep); config.addPipelineStep('authorize', AuthenticateStep); // Add a route filter so only authenticated uses are authorized to access some routes config.map(AppRoutes["AppRoutes"]); config.mapUnknownRoutes(instruction => { window.dataLayer.push({ "event" : "404" }); return "application/404/404"; }); this.router = router; } } class PostCompleteStep { run(routingContext, next) { let metaInfoTmpl; if (routingContext.config.moduleId !== "trek/trek/trek") { metaInfoTmpl = `<link rel="canonical" href="`+window.location.href+`" /> <meta name="og:title" content="`+routingContext.config.title+` | Trekeffect"> <meta name="og:site_name" content="`+routingContext.config.title+` | Trekeffect"> <meta name="twitter:title" content="`+routingContext.config.title+` | Trekeffect">`; } if (routingContext.config.settings !== undefined) { if(routingContext.config.settings.metaDescription !== undefined) { metaInfoTmpl += `<meta name="description" content="`+routingContext.config.settings.metaDescription+`"> <meta name="og:description" content="`+routingContext.config.settings.metaDescription+`"> <meta name="twitter:description" content="`+routingContext.config.settings.metaDescription+`">`; } $('link[rel="canonical"], meta[name="og:title"], meta[name="og:site_name"], meta[name="twitter:title"], meta[name="description"], meta[name="og:description"], meta[name="twitter:description"]').remove(); $('head').append(metaInfoTmpl); } $(window).scrollTop(0); $("body").removeClass().addClass(routingContext.config.name); //Store the last visited url in local storage for Google Tag Manager setTimeout(()=>{ localStorage.setItem("lastURL", window.location.pathname); }, 2000); //mt('send', 'pageview', {email: 'my@email.com', firstname: 'John'}); // window.dataLayer.push({ // "event" : "aureliaPageView" // }); //OfflinePluginRuntime.install(); return next(); } }

And here is my the class that contains a few of my routes:

import {PLATFORM} from 'aurelia-pal'; export default { "AppRoutes" : [{ route: '', name: 'homepage', moduleId: PLATFORM.moduleName('application/homepage/homepage'), title: 'lorem', appPage: false, settings: { "metaDescription" : "lorem" } }, { route: 'about', name: 'about', moduleId: PLATFORM.moduleName('application/about/about'), title: 'About Us', appPage: false, settings: { "metaDescription" : "lorem." } }, { route: 'affiliates', name: 'affiliates', moduleId: PLATFORM.moduleName('integrations/affiliates/affiliates'), title: 'Affiliates', appPage: false }, ] }

EDIT: When I add in moduleName I get this loader error:

UPDATE: When platform moduleName has the same ID, in this case 'story/stories/stories', the first route gets corrupt and throws a can't find module error. How can we fix this?