Aligned legacy webpack configurations to changes in ckeditor5-dev-*.

docs/getting-started/advanced/integrating-from-source-webpack.md

@@ -69,13 +69,17 @@ You can now configure webpack. There are a couple of things that you need to tak
 The minimal configuration, assuming that you use the same methods of handling assets as CKEditor 5 builds, will look like this:
 
 ```js
-// webpack.config.js
+import path from 'path';
+import { createRequire } from 'module';
+import { styles } from '@ckeditor/ckeditor5-dev-utils';
+import { CKEditorTranslationsPlugin } from '@ckeditor/ckeditor5-dev-translations';
 
-const path = require( 'path' );
-const { CKEditorTranslationsPlugin } = require( '@ckeditor/ckeditor5-dev-translations' );
-const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );
+const __filename = fileURLToPath( import.meta.url );
+const __dirname = path.dirname( __filename );
 
-module.exports = {
+const require = createRequire( import.meta.url );
+
+export default {
 	entry: './main.js',
 	output: {
 		path: path.resolve( __dirname, 'dist' ),
@@ -136,13 +140,17 @@ module.exports = {
 Optionally, you may need to handle `.ts` files to use TypeScript in your project. There is the [`ts-loader`](https://webpack.js.org/guides/typescript/#loader) for this purpose. Webpack configuration must take into account these changes.
 
 ```js
-// webpack.config.js
+import path from 'path';
+import { createRequire } from 'module';
+import { styles } from '@ckeditor/ckeditor5-dev-utils';
+import { CKEditorTranslationsPlugin } from '@ckeditor/ckeditor5-dev-translations';
 
-const path = require( 'path' );
-const { CKEditorTranslationsPlugin } = require( '@ckeditor/ckeditor5-dev-translations' );
-const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );
+const __filename = fileURLToPath( import.meta.url );
+const __dirname = path.dirname( __filename );
+
+const require = createRequire( import.meta.url );
 
-module.exports = {
+export default {
 	entry: './main.ts',
 	output: {
 		path: path.resolve( __dirname, 'dist' ),
@@ -568,9 +576,14 @@ npm install --save \
 And add it to your webpack configuration:
 
 ```js
-const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
 
-module.exports = {
+import path from 'path';
+import { createRequire } from 'module';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+
+const require = createRequire( import.meta.url );
+
+export default {
 	// More configuration.
 	// ...
 

docs/getting-started/legacy-getting-started/integrations/react.md

@@ -444,6 +444,8 @@ First, import an object that provides a utility for creating the configuration f
 
 ```js
 const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );
+// or use an `import` instruction when developing an ESM project (`type=module`).
+import { styles } from '@ckeditor/ckeditor5-dev-utils';
 ```
 
 Then, add two new elements to the exported object under the `module.rules` array (as new items of the `oneOf` array). These are SVG and CSS loaders required to handle the CKEditor 5 source:
@@ -738,6 +740,8 @@ Then, add the installed plugin to the webpack configuration:
 
 // ...
 const { CKEditorTranslationsPlugin } = require( '@ckeditor/ckeditor5-dev-translations' );
+// or use an `import` instruction when developing an ESM project (`type=module`).
+import { CKEditorTranslationsPlugin } from '@ckeditor/ckeditor5-dev-translations';
 
 module.exports = {
 	// ...

docs/getting-started/legacy-getting-started/quick-start-other.md

@@ -209,6 +209,7 @@ Then, install the packages needed to build CKEditor 5:
 
 ```bash
 npm install --save \
+	@ckeditor/ckeditor5-dev-utils \
 	css-loader@5 \
 	postcss-loader@4 \
 	raw-loader@4 \
@@ -220,14 +221,18 @@ npm install --save \
 The minimal webpack configuration needed to enable building CKEditor 5 is:
 
 ```js
-// webpack.config.js
+// webpack.config.mjs
+
+import path from 'path';
+import { createRequire } from 'module';
+import { styles } from '@ckeditor/ckeditor5-dev-utils';
 
-'use strict';
+const __filename = fileURLToPath( import.meta.url );
+const __dirname = path.dirname( __filename );
 
-const path = require( 'path' );
-const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );
+const require = createRequire( import.meta.url );
 
-module.exports = {
+export default {
 	// https://webpack.js.org/configuration/entry-context/
 	entry: './app.js',
 
@@ -294,7 +299,6 @@ You can start with the {@link examples/builds/classic-editor classic editor} wit
 
 ```bash
 npm install --save \
-	@ckeditor/ckeditor5-dev-utils \
 	@ckeditor/ckeditor5-editor-classic \
 	@ckeditor/ckeditor5-essentials \
 	@ckeditor/ckeditor5-paragraph \

docs/updating/nim-migration/migration-to-new-installation-methods.md

@@ -20,12 +20,19 @@ Prior to version 42.0.0, there were several ways to install CKEditor 5, eac
 Here is a code example showing one of the possible setups using the old installation methods:
 
 ```js
-// webpack.config.js
-const path = require( 'path' );
-const { CKEditorTranslationsPlugin } = require( '@ckeditor/ckeditor5-dev-translations' );
-const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );
+// webpack.config.mjs
 
-module.exports = {
+import path from 'path';
+import { createRequire } from 'module';
+import { styles } from '@ckeditor/ckeditor5-dev-utils';
+import { CKEditorTranslationsPlugin } from '@ckeditor/ckeditor5-dev-translations';
+
+const __filename = fileURLToPath( import.meta.url );
+const __dirname = path.dirname( __filename );
+
+const require = createRequire( import.meta.url );
+
+export default {
 	entry: './src/index.js',
 	output: {
 		path: path.resolve( __dirname, 'dist' ),