Preserve order of modules in Webpack

Question

import('./A');
import('./B');
import('./C');
export class Person {};

A, B and C are plain JS (es5) libraries which use global window object and depends on each other.

Looking at the output file, I see that Webpack ( awesome-typescript-loader ) changes the order of modules, and it causes issues.

How to include them in the output file in exact same order?

Answer 1

The right answer is probably to convert your files to typescript but this answer assumes you have time to completely convert your existing js files to ts. If for some reason you don't, they should still work pretty well as partially converted ts files you just might have to take some conversion shortcuts.

I would only recommend doing this with existing known good working js files and only if you can't take the time to convert them which is why I am assuming you are asking the question.

copy your javascript *.js file content into new typescript *.ts files. resolve all the lint complaints (you can err on the side of flexibility for your JS code) ie using

// @ts-ignore

and the "any" type only when necessary

export the things used by your other files in your new ts files ie

export {varible}

import those things by the dependent files ie

import {varible} from "./variableFile"

this should resolve your import order issues.