Repository: webpack/webpack (JavaScript)

Issue:
Order of imported (or exported) values is not respected between dev and prod env
<!-- Please don't delete this template because we'll close your issue -->
<!-- Before creating an issue please make sure you are using the latest version of webpack. -->

# Bug report

<!-- Please ask questions on StackOverflow or the webpack Gitter. -->
<!-- https://stackoverflow.com/questions/ask?tags=webpack -->
<!-- https://gitter.im/webpack/webpack -->
<!-- Issues which contain questions or support requests will be closed. -->

**What is the current behavior?**

Order of imported values (when using `import * as values`) is not respected between dev and prod environment

**If the current behavior is a bug, please provide the steps to reproduce.**

foo.js:

```
export const W = 'w';
export const A = 'a';
```

bar.js:

```
import * as values from './foo.js':

console.log(Object.keys(values));
```

webpack 4 dev + prod will output ['W', 'A'];
webpack 5 dev will output ['W', 'A'];
webpack 5 prod will output ['A', 'W']

**What is the expected behavior?**

It should, at least, be the same between dev and production environment for webpack 5, and would be best to keep the same ordrer as declared (like webpack 4 or dev in webpack 5)

**Other relevant information:**

webpack version: 5.3.1
Node.js version: 14.13.1
Operating System: linux
Additional tools: webpack-dev-server



Hints:
What is real use case?
It's not really a use case but in our app we have some wrapper in front of react router where we get our routes like this:

```
import * as Routes from './routes.js`
```

then later we do a switch

```
<Switch>
    {Object.keys(Routes).map(route => {
         ...
    })}
</Switch>
```

It broke our application on webpack 5 prod, because `Switch` rely on order to match: first matching = first display. Since we have a NOT_FOUND route to handle bad routes, every route named after it (in alphabetical order) was no longer working. It's easy to understand (and fix it) once you know it, but pretty hard to debug this.
/cc @sokra 
The spec requires alphabetical order, but for technical reasons we can't ensure that when commonjs interop is involved. But in a pure ESM we should make sure it's in that order.

Patch:
diff --git a/lib/dependencies/HarmonyExportInitFragment.js b/lib/dependencies/HarmonyExportInitFragment.js
--- a/lib/dependencies/HarmonyExportInitFragment.js
+++ b/lib/dependencies/HarmonyExportInitFragment.js
@@ -145,7 +145,10 @@ class HarmonyExportInitFragment extends InitFragment {
 				? `/* unused harmony export ${first(this.unusedExports)} */\n`
 				: "";
 		const definitions = [];
-		for (const [key, value] of this.exportMap) {
+		const orderedExportMap = Array.from(this.exportMap).sort(([a], [b]) =>
+			a < b ? -1 : 1
+		);
+		for (const [key, value] of orderedExportMap) {
 			definitions.push(
 				`\n/* harmony export */   ${JSON.stringify(
 					key


Test patch:
diff --git a/test/configCases/issues/issue-11871-imports-order/a.js b/test/configCases/issues/issue-11871-imports-order/a.js
new file mode 100644
--- /dev/null
+++ b/test/configCases/issues/issue-11871-imports-order/a.js
@@ -0,0 +1,4 @@
+export const W = "w";
+export const A = "a";
+export const a = "a";
+export const _12 = "12";
diff --git a/test/configCases/issues/issue-11871-imports-order/index.js b/test/configCases/issues/issue-11871-imports-order/index.js
new file mode 100644
--- /dev/null
+++ b/test/configCases/issues/issue-11871-imports-order/index.js
@@ -0,0 +1,5 @@
+import * as values from "./a.js";
+
+it("imports should have correct order", () => {
+	expect(Object.keys(values)).toEqual(["A", "W", "_12", "a"])
+});
diff --git a/test/configCases/issues/issue-11871-imports-order/webpack.config.js b/test/configCases/issues/issue-11871-imports-order/webpack.config.js
new file mode 100644
--- /dev/null
+++ b/test/configCases/issues/issue-11871-imports-order/webpack.config.js
@@ -0,0 +1,23 @@
+"use strict";
+
+/** @type {import("../../../../").Configuration[]} */
+module.exports = [
+	{
+		mode: "development"
+	},
+	{
+		mode: "production"
+	},
+	{
+		mode: "production",
+		optimization: {
+			concatenateModules: false
+		}
+	},
+	{
+		mode: "development",
+		optimization: {
+			concatenateModules: true
+		}
+	}
+];