# Webpack code splitting

**URL:** <https://discourse.aurelia.io/t/webpack-code-splitting/1956>\
**Category:** Help Requests\
**Created:** [November 27, 2018, 3:00pm UTC](https://discourse.aurelia.io/t/webpack-code-splitting/1956 "2018-11-27T15:00:39Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![elitemike](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/elitemike/32/690_2.png) [@elitemike](https://discourse.aurelia.io/u/elitemike)\
**Post date:** [November 27, 2018, 3:00pm UTC](https://discourse.aurelia.io/t/webpack-code-splitting/1956/1 "2018-11-27T15:00:39Z")

</div>

I have an app structure that looks like this  
src  
–areas  
----area1  
----area2  
----area3

Each area is essentially a page, there may be multiple child pages per area, but I’m okay with them all being bundled as one area chunk.

I used some of the updated web pack config to fix the issue where vendor modules were being duplicated in the app. I am trying to write a rule that will create a chunk per area though I fear I don’t know exactly how to do this. I tried something like this

```auto
 appSplit: { // each area as separate chunk file
          test: /[\\/]src[\\/]areas[\\/]/,
          name(module) {
            // Extract the name of the package from the path segment after node_modules
            const packageName = module.context.match(/[\\/]src[\\/]areas[\\/](.*?)([\\/]|$)/)[0];
            return `app.${packageName.replace('@', '')}`;
          },
          priority: 20,
          minSize: 1
        }

```

I’m currently broken on the package name, but if i just give it a string, i only end up with one package and all areas are in it, so that is either due to naming or I’m doing something completely wrong

---

<div class="post-metadata">

**Author:** ![MaximBalaganskiy](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/maximbalaganskiy/32/831_2.png) [@MaximBalaganskiy](https://discourse.aurelia.io/u/MaximBalaganskiy)\
**Post date:** [November 28, 2018, 2:24am UTC](https://discourse.aurelia.io/t/webpack-code-splitting/1956/2 "2018-11-28T02:24:00Z")

</div>

You can supply a second parameter to the Platform function which will be the name of the separate bundle

---

<div class="post-metadata">

**Author:** ![elitemike](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/elitemike/32/690_2.png) [@elitemike](https://discourse.aurelia.io/u/elitemike)\
**Post date:** [November 30, 2018, 11:43am UTC](https://discourse.aurelia.io/t/webpack-code-splitting/1956/3 "2018-11-30T11:43:50Z")

</div>

I’m not sure I understand what you mean by the Platform function. Can you give an example?

---

<div class="post-metadata">

**Author:** ![d-kostov-dev](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/d-kostov-dev/32/495_2.png) [@d-kostov-dev](https://discourse.aurelia.io/u/d-kostov-dev)\
**Post date:** [November 30, 2018, 7:24pm UTC](https://discourse.aurelia.io/t/webpack-code-splitting/1956/4 "2018-11-30T19:24:09Z")

</div>

This is how i do it. Look at “CHUNK\_NAME”, it’s an additional property to the PLATFORM. It also works for dialogs.

{  
route: ‘ROUTE\_URL\_NAME’,  
name: ‘ROUTE\_NAME’,  
moduleId: PLATFORM.moduleName(‘PATH\_TO\_PAGE’, ‘CHUNK\_NAME’),  
nav: true,  
title: ‘TITLE’  
},