Legacy Javascript System Webpack Migration Solution

Question

My question is

How to define webpack entry points for a legacy javascript code base over hundreds of html pages

I've come across this system with old school fashion frontend coding style( javascript css html) -- I call it plain jQuery style fashion.

As this code base grows, duplicated(almost the same functional) codes are flooding many js files. I can tell sth bad about this code base will come soon.

I really wanna take advantage of the current fashion build/management tool, say webpack.

So I googled around, people are more focused on how to apply webpack in a small scale of html pages (more like with 10 pages)

My case is that almost 200+ html children pages extending from 3 base_xxx.html parent pages sharing the same <script src="xxx.js"></script> and <link rel="stylesheet" href="xxx.css"/> tags .

And each child page got its own, self-defined, customized js control/display logic to handle page own requirement.

e.g:

base_1.html
    |__lib11 .js+.css
    |__lib12 .js+.css
    |__lib13 .js+.css
    |__...
    |__lib1N .js+.css

child11.html extends base_1.html
    |__child11 .js+.css

child12.html extends base_1.html
    |__child12 .js+.css

...

child1N.html extends base_1.html
    |__child1N .js+.css

...

base_2.html
    |__lib11 .js+.css
    |__lib12 .js+.css
    |__lib13 .js+.css
    |__...
    |__lib21 .js+.css
    |__lib22 .js+.css
    |__...
    |__lib2N .js+.css

child21.html extends base_2.html
    |__child21 .js+.css

child22.html extends base_2.html
    |__child22 .js+.css

...

child2N.html extends base_2.html
    |__child2N .js+.css

Let's assume an extreme situation that child## .js+.css isn't compatible with each other,

namely child11 .js+.css and child12 .js+.css could not be included in the same html page due to possible diff control/display logic on the same id or class.

For the time being, I could combine those standard lib## .js+.css to vendor## .js+.css, namely a few entry point in webpack can be defined as vendor##

However, what to do about those child## .js+.css?

entry : {
    vendor1 : [
        'lib11',
        'lib12',
        'lib13',
        ...,
        'lib1N',
    ],
    vendor2 : [
        'lib21',
        'lib22',
        'lib23',
        ...,
        'lib2N',
    ],
    // nightmare!!! over 200+ entry point definitions?
    child11: ['child11'],
    child12: ['child12'],
    child13: ['child13'],
    ...
    child1N: ['child1N'],
    child21: ['child21'],
    child22: ['child22'],
    child23: ['child23'],
    ...
    child2N: ['child2N'],
},
output : {
    filename : '[name].js'
}

in those html pages include only 4 file inclusion e.g:

<!--child11.html-->
vendor1.css
child11.css
vendor1.js
child11.js

<!--child12.html-->
vendor1.css
child12.css
vendor1.js
child12.js

<!--child1N.html-->
vendor1.css
child1N.css
vendor1.js
child1N.js

The entry point definitions part just killing me, any better solution?

Thanks