[DOCS] webpack documentation concept and config section from CommonJS to ESM

src/content/concepts/configuration.mdx

@@ -10,13 +10,14 @@ contributors:
 
 You may have noticed that few webpack configurations look exactly alike. This is because **webpack's configuration file is a JavaScript file that exports a webpack [configuration](/configuration/).** This configuration is then processed by webpack based upon its defined properties.
 
-Because it's a standard Node.js CommonJS module, you **can do the following**:
+Because it's a standard ECMAScript Module, you **can do the following**:
 
-- Import other files via `require(...)`
-- use utilities on npm via `require(...)`
+- Import other files via `import...from...`
+- use utilities on npm via `import`
 - use JavaScript control flow expressions, e.g. the `?:` operator
 - use constants or variables for often used values
 - write and execute functions to generate a part of the configuration
+- emulate `__dirname` using `fileURLToPath(import.meta.url)` and `path.dirname()` for path resolution
 
 Use these features when appropriate.
 
@@ -35,9 +36,13 @@ The examples below describe how webpack's configuration can be both expressive a
 **webpack.config.js**
 
 ```javascript
-const path = require('path');
+import path from 'path';
+import { fileURLToPath } from 'url';
 
-module.exports = {
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default {
   mode: 'development',
   entry: './foo.js',
   output: {

src/content/concepts/entry-points.mdx

@@ -23,7 +23,7 @@ Usage: `entry: string | [string]`
 **webpack.config.js**
 
 ```javascript
-module.exports = {
+export default {
   entry: './path/to/my/entry/file.js',
 };
 ```
@@ -33,7 +33,7 @@ The single entry syntax for the `entry` property is a shorthand for:
 **webpack.config.js**
 
 ```javascript
-module.exports = {
+export default {
   entry: {
     main: './path/to/my/entry/file.js',
   },
@@ -45,7 +45,7 @@ We can also pass an array of file paths to the `entry` property which creates wh
 **webpack.config.js**
 
 ```javascript
-module.exports = {
+export default {
   entry: ['./src/file_1.js', './src/file_2.js'],
   output: {
     filename: 'bundle.js',
@@ -62,7 +62,7 @@ Usage: `entry: { <entryChunkName> string | [string] } | {}`
 **webpack.config.js**
 
 ```javascript
-module.exports = {
+export default {
   entry: {
     app: './src/app.js',
     adminApp: './src/adminApp.js',
@@ -91,7 +91,7 @@ An object of entry point description. You can specify the following properties.
 **webpack.config.js**
 
 ```javascript
-module.exports = {
+export default {
   entry: {
     a2: 'dependingfile.js',
     b2: {
@@ -107,7 +107,7 @@ module.exports = {
 **webpack.config.js**
 
 ```javascript
-module.exports = {
+export default {
   entry: {
     a2: './a',
     b2: {
@@ -122,7 +122,7 @@ module.exports = {
 Make sure `runtime` must not point to an existing entry point name, for example the below config would throw an error:
 
 ```javascript
-module.exports = {
+export default {
   entry: {
     a1: './a',
     b1: {
@@ -136,7 +136,7 @@ module.exports = {
 Also `dependOn` must not be circular, the following example again would throw an error:
 
 ```javascript
-module.exports = {
+export default {
   entry: {
     a3: {
       import: './a',
@@ -159,7 +159,7 @@ Below is a list of entry configurations and their real-world use cases:
 **webpack.config.js**
 
 ```javascript
-module.exports = {
+export default {
   entry: {
     main: './src/app.js',
     vendor: './src/vendor.js',
@@ -170,7 +170,7 @@ module.exports = {
 **webpack.prod.js**
 
 ```javascript
-module.exports = {
+export default {
   output: {
     filename: '[name].[contenthash].bundle.js',
   },
@@ -180,7 +180,7 @@ module.exports = {
 **webpack.dev.js**
 
 ```javascript
-module.exports = {
+export default {
   output: {
     filename: '[name].bundle.js',
   },
@@ -198,7 +198,7 @@ T> In webpack version < 4 it was common to add vendors as a separate entry point
 **webpack.config.js**
 
 ```javascript
-module.exports = {
+export default {
   entry: {
     pageOne: './src/pageOne/index.js',
     pageTwo: './src/pageTwo/index.js',

src/content/concepts/index.mdx

@@ -54,7 +54,7 @@ By default its value is `./src/index.js`, but you can specify a different (or mu
 **webpack.config.js**
 
 ```js
-module.exports = {
+export default {
   entry: './path/to/my/entry/file.js',
 };
 ```
@@ -70,9 +70,13 @@ You can configure this part of the process by specifying an `output` field in yo
 **webpack.config.js**
 
 ```javascript
-const path = require('path');
+import path from 'path';
+import { fileURLToPath } from 'url';
 
-module.exports = {
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default {
   entry: './path/to/my/entry/file.js',
   output: {
     path: path.resolve(__dirname, 'dist'),
@@ -99,9 +103,9 @@ At a high level, **loaders** have two properties in your webpack configuration:
 **webpack.config.js**
 
 ```javascript
-const path = require('path');
+import path from 'path';
 
-module.exports = {
+export default {
   output: {
     filename: 'my-first-webpack.bundle.js',
   },
@@ -132,10 +136,10 @@ In order to use a plugin, you need to `require()` it and add it to the `plugins`
 **webpack.config.js**
 
 ```javascript
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const webpack = require('webpack'); //to access built-in plugins
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import webpack from 'webpack'; //to access built-in plugins
 
-module.exports = {
+export default {
   module: {
     rules: [{ test: /\.txt$/, use: 'raw-loader' }],
   },
@@ -154,7 +158,7 @@ Using plugins in your webpack configuration is straightforward. However, there a
 By setting the `mode` parameter to either `development`, `production` or `none`, you can enable webpack's built-in optimizations that correspond to each environment. The default value is `production`.
 
 ```javascript
-module.exports = {
+export default {
   mode: 'production',
 };
 ```

src/content/concepts/loaders.mdx

@@ -34,7 +34,7 @@ And then instruct webpack to use the [`css-loader`](/loaders/css-loader) for eve
 **webpack.config.js**
 
 ```js
-module.exports = {
+export default {
   module: {
     rules: [
       { test: /\.css$/, use: 'css-loader' },
@@ -61,7 +61,7 @@ This is a concise way to display loaders, and helps to maintain clean code. It a
 Loaders are evaluated/executed from right to left (or from bottom to top). In the example below execution starts with sass-loader, continues with css-loader and finally ends with style-loader. See ["Loader Features"](/concepts/loaders/#loader-features) for more information about loaders order.
 
 ```js
-module.exports = {
+export default {
   module: {
     rules: [
       {

src/content/concepts/output.mdx

@@ -20,7 +20,7 @@ The minimum requirement for the `output` property in your webpack configuration
 **webpack.config.js**
 
 ```javascript
-module.exports = {
+export default {
   output: {
     filename: 'bundle.js',
   },
@@ -34,7 +34,7 @@ This configuration would output a single `bundle.js` file into the `dist` direct
 If your configuration creates more than a single "chunk" (as with multiple entry points or when using plugins like CommonsChunkPlugin), you should use [substitutions](/configuration/output/#outputfilename) to ensure that each file has a unique name.
 
 ```javascript
-module.exports = {
+export default {
   entry: {
     app: './src/app.js',
     search: './src/search.js',
@@ -55,7 +55,7 @@ Here's a more complicated example of using a CDN and hashes for assets:
 **config.js**
 
 ```javascript
-module.exports = {
+export default {
   //...
   output: {
     path: '/home/proj/cdn/assets/[fullhash]',

src/content/concepts/plugins.mdx

@@ -26,15 +26,13 @@ A webpack **plugin** is a JavaScript object that has an [`apply`](https://develo
 ```javascript
 const pluginName = 'ConsoleLogOnBuildWebpackPlugin';
 
-class ConsoleLogOnBuildWebpackPlugin {
+export default class ConsoleLogOnBuildWebpackPlugin {
   apply(compiler) {
-    compiler.hooks.run.tap(pluginName, (compilation) => {
+    compiler.hooks.run.tap(pluginName, () => {
       console.log('The webpack build process is starting!');
     });
   }
 }
-
-module.exports = ConsoleLogOnBuildWebpackPlugin;
 ```
 
 It is recommended that the first parameter of the tap method of the compiler hook should be a camelized version of the plugin name. It is advisable to use a constant for this so it can be reused in all hooks.
@@ -50,11 +48,11 @@ Depending on how you are using webpack, there are multiple ways to use plugins.
 **webpack.config.js**
 
 ```javascript
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const webpack = require('webpack'); //to access built-in plugins
-const path = require('path');
+import HtmlWebpackPlugin from 'html-webpack-plugin');
+import webpack from 'webpack'; //to access built-in plugins
+import path from 'path';
 
-module.exports = {
+export default {
   entry: './path/to/my/entry/file.js',
   output: {
     filename: 'my-first-webpack.bundle.js',
@@ -84,10 +82,10 @@ When using the Node API, you can also pass plugins via the `plugins` property in
 **some-node-script.js**
 
 ```javascript
-const webpack = require('webpack'); //to access webpack runtime
-const configuration = require('./webpack.config.js');
+import webpack from 'webpack'; //to access webpack runtime
+import configuration from './webpack.config.js';
 
-let compiler = webpack(configuration);
+const compiler = webpack(configuration);
 
 new webpack.ProgressPlugin().apply(compiler);
 

src/content/concepts/targets.mdx

@@ -21,7 +21,7 @@ To set the `target` property, you set the target value in your webpack config:
 **webpack.config.js**
 
 ```javascript
-module.exports = {
+export default {
   target: 'node',
 };
 ```
@@ -39,7 +39,7 @@ Although webpack does **not** support multiple strings being passed into the `ta
 **webpack.config.js**
 
 ```javascript
-const path = require('path');
+import path from 'path';
 const serverConfig = {
   target: 'node',
   output: {
@@ -58,7 +58,7 @@ const clientConfig = {
   //…
 };
 
-module.exports = [serverConfig, clientConfig];
+export default [serverConfig, clientConfig];
 ```
 
 The example above will create a `lib.js` and `lib.node.js` file in your `dist` folder.

src/content/concepts/under-the-hood.mdx

@@ -39,7 +39,7 @@ When you describe an entry point - under the hood, you create a chunk group with
 **./webpack.config.js**
 
 ```js
-module.exports = {
+export default {
   entry: './index.js',
 };
 ```
@@ -52,7 +52,7 @@ Another example:
 **./webpack.config.js**
 
 ```js
-module.exports = {
+export default {
   entry: {
     home: './home.js',
     about: './about.js',
@@ -77,7 +77,7 @@ Each chunk has a corresponding **asset**. The assets are the output files - the
 **webpack.config.js**
 
 ```js
-module.exports = {
+export default {
   entry: './src/index.jsx',
 };
 ```