Refactor(cli): Migrate from CJS to ESM

[evenstensberg]

Is your feature request related to a problem? Please describe.
As node evolves, we need to change from CJS to ESM for webpack-cli.

Describe the solution you'd like

N/A

Describe alternatives you've considered

N/A
Additional context

This issue originates from @alexander-akait 's feedback.

[webpack-bot]

This issue had no activity for at least half a year.

It's subject to automatic issue closing if there is no activity in the next 15 days.

[webpack-bot]

Issue was closed because of inactivity.

If you think this is still a valid issue, please file a new issue with additional information.

[nyngwang]

Does this refactor mean that we can write webpack.config.js in ESM without relying on the package.json "type": "module" because an ESM can easily import another ESM?

Background

There is currently some serious bug on TypeScript's new option "moduleResolution": "bundler" when "type": "module" is set, and it's clearly stated on their documentation regarding working with bundler: https://www.typescriptlang.org/docs/handbook/modules/guides/choosing-compiler-options.html#im-using-a-bundler.

In addition to adopting the following settings, it’s also recommended not to set { "type": "module" } or use .mts files in bundler projects for now. Some bundlers adopt different ESM/CJS interop behavior under these circumstances, which TypeScript cannot currently analyze with "moduleResolution": "bundler". See issue #54102 for more information.

I want to know whether this issue can remove the need for "type": "module". The related issue of TypeScript#54102 is webpack/webpack#17288.

[alexander-akait]

You already can do it, we support commonjs and ESM formats

[nyngwang]

@alexander-akait I can't. I got an error:

Notice that I didn't use @babel/register with config name webpack.config.babel.js and I didn't add "type": "module" in package.json. By webpack support with the consideration above, I should not add "type": "module" in package.json.

✔ ~/GitHub/Frontend % npm run dev development                                                                                                                              20:41:36

> frontend@0.0.1 dev
> webpack server --mode development

[webpack-cli] Failed to load '/Users/ningwang/GitHub/Frontend/webpack.config.js' config
[webpack-cli] /Users/ningwang/GitHub/Frontend/webpack.config.js:1
import path from 'path'
^^^^^^

SyntaxError: Cannot use import statement outside a module

  "devDependencies": {
    "@babel/core": "^7.24.0",
    "@babel/plugin-transform-react-constant-elements": "^7.23.3",
    "@babel/plugin-transform-runtime": "^7.24.0",
    "@babel/preset-env": "^7.24.0",
    "@babel/preset-react": "^7.23.3",
    "webpack": "^5.90.3",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.2"
  }

[alexander-akait]

Rename webpack.config.js to webpack.config.mjs