0

I need to do the following with webpack 4:

entry: common.js, one.js, two.js

output: common.bundle.js, one.bundle.js,  two.bundle.js

where:

common.js: contains common features

one.js: depends on common.js

two.js: depends on one.js and common.js

Earlier I used webpack 3 and this was the default behaviour to generate such bundles. Now I with webpack 4 I cannot get it run

When I run it with the default webpack 4 configuration then what I get is:

common.bundle.js - (ok)

one.bundle.js: contains code of common.bundle.js (wrong, should only have reference to common.bundle.js)

two.js: contains code of common.bundle.js and one.bundle.js (wrong, should only have references to common.bundle.js and to one.bundle.js)

Antoni
  • 41
  • 1
  • 5

1 Answers1

0

In case someone has a similar situation, I solved it with the following config:

"entry": {
            "main": "main.js"
        },
        "output": {
            "filename": "[name].module.js",
            "path": "./dist"
        },
        "optimization": {                
            "splitChunks": {
                "cacheGroups": {                       
                    "common": {
                        "test": /common/,
                        "name": "common",
                        "chunks": "initial",
                        "enforce": true
                    },
                    "one": {
                        "test": /one/,
                        "name": "one",
                        "chunks": "initial",
                        "enforce": true
                    },
                    "two": {
                        "test": /two/,
                        "name": "two",
                        "chunks": "initial",
                        "enforce": true
                    },                        
                }
            }
        }

At the end I have the following output:

main.module.js,

common.module.js,

one.module.js

two.module.js

Antoni
  • 41
  • 1
  • 5