title: Webpack 4 With Aurelia Not Automatically Doing Splitting
body: <p>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.  </p>
  
  <p><a href="https://i.stack.imgur.com/T4B5s.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T4B5s.png" alt="enter image description here"></a></p>
  
  <p>Here is my webpack config:</p>
  
  <pre><code>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 &amp;&amp; process.env.NODE_ENV.toLowerCase() || (process.env.NODE_ENV = 'local');
  const isHMR = process.argv.join('').indexOf('hot') &gt; -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&amp;mimetype=video/mp4'
                               },
                               {
                                test: /\.ogv$/,
                                loader: 'url-loader?limit=100000&amp;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;
  </code></pre>
  
  <p>Here is my app.ts:</p>
  
  <pre><code>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) =&gt; {
  
                                        if(this.appState.isLoggedIn === true)
                                         {
                                          if (this.appState.userInfo.status !== 9 &amp;&amp; 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 =&gt; {
  
                                       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 = `&lt;link rel="canonical" href="`+window.location.href+`" /&gt;
                                                  &lt;meta name="og:title" content="`+routingContext.config.title+` | Trekeffect"&gt;
                                                  &lt;meta name="og:site_name" content="`+routingContext.config.title+` | Trekeffect"&gt;
                                                  &lt;meta name="twitter:title" content="`+routingContext.config.title+` | Trekeffect"&gt;`;
                                }
  
                               if (routingContext.config.settings !== undefined)
                               {
                                if(routingContext.config.settings.metaDescription !== undefined)
                                {
                                 metaInfoTmpl += `&lt;meta name="description" content="`+routingContext.config.settings.metaDescription+`"&gt;
                                                   &lt;meta name="og:description" content="`+routingContext.config.settings.metaDescription+`"&gt;
                                                   &lt;meta name="twitter:description" content="`+routingContext.config.settings.metaDescription+`"&gt;`;
                                }
  
                                $('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(()=&gt;{
                                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();
                              } 
                         }
  </code></pre>
  
  <p>And here is my the class that contains a few of my routes:</p>
  
  <pre><code>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
                                 },
  
                                ]
                 }
  </code></pre>
  
  <p>EDIT: When I add in moduleName I get this loader error:
  <a href="https://i.stack.imgur.com/2hA1R.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2hA1R.png" alt="enter image description here"></a></p>
  
  <p>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?</p>
  
  <pre><code>{
                   route: 'stories',
                   name: 'stories',
                   moduleId: PLATFORM.moduleName('story/stories/stories', "featureStories"),
                   title: 'Featured Stories',
                   appPage: true,
                  },
                  {
                   route: 'stories/published',
                   name: 'storiesPublished',
                   moduleId: PLATFORM.moduleName('story/stories/stories', "stories"),
                   title: 'Published Stories',
                   appPage: true,
                  },
  </code></pre>