Feature Request: Update documentation examples to ES6

[SetTrend]

Feature to document

Currently, the WebPack documentation appears quite old-fashioned and out-of date when all examples are provided in (obsolete) CommonJS-style.

I propose to reflect current JavaScript spec by updating all examples to comply with ES2024 (or ESNEXT, so to speak).

Author(s)

@pranshuchittora, @EugeneHlushko

[kelset]

Just want to give a +1 on this.

If you just "blindly" follow even just the basic setup https://webpack.js.org/guides/getting-started/#basic-setup

you will encounter numerous issues without understanding what's going on, just because the tooling that you will pull down as latest (such as npx webpack) will error out with the "standard errors" that are not doing a newcomer any good.

Here are a couple of quick examples:

1. npn init will by default add "type": "commonjs", to the package.json, which makes npx webpack fail with:

   Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
   You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
   > import _ from 'lodash';
   

   during the Creating a Bundle step. fix is simple, need to change the type to module
2. During the Using a Configuration it will then fail again because the example code provided is still ES5, so npx webpack --config webpack.config.js will fail with:

   [webpack-cli] Failed to load '[...]/webpack-demo/webpack.config.js' config
   [webpack-cli] ReferenceError: require is not defined
   

   and to fix you need to rewrite the config in ES6.

Again, not rocket science, sure - but since it's how some people who might have no idea what they are dealing with my be very much stuck and/or stop trying to follow the tutorial entirely.

(I'd dare say, this type of work might even be AI agent doable? as a quick way to migrate it to the ES6 without wasting anyone's time)

[SetTrend]

If I may add the following to this feature request:

Please comb through the documentation and remove all "prior to webpack 5" content. For example, the "Asset Modules" page begins with loads of anecdotic content without value to the reader.

[alexander-akait]

PR welcome

[jashtanna007]

Hello everyone, I’d like to help with this issue by updating some docs examples from CommonJS to ES6 syntax (import / export). Can I start working on it? @alexander-akait

[alexander-akait]

Yes

[DeekshaVarshney123]

Hii, I see this issue is still open and the previous PR seems inactive. I am interested in continuing this work and updating documentation examples to ES6 syntax. Can I take up this issue? Thanks! @alexander-akait