Project migration to webpack 5

packages/ckeditor5-package-generator/lib/templates/sample/index.html

@@ -94,6 +94,6 @@ <h3>Reporting issues</h3>
     </ul>
 </div>
 
-<script src="./script.dist.js"></script>
+<script src="./ckeditor.dist.js"></script>
 </body>
 </html>

packages/ckeditor5-package-tools/lib/utils/get-karma-config.js

@@ -9,6 +9,7 @@
 
 const path = require( 'path' );
 const { getPostCssConfig } = require( '@ckeditor/ckeditor5-dev-utils' ).styles;
+const getThemePath = require( './get-theme-path' );
 
 /**
  * @param {Object} options
@@ -20,7 +21,7 @@ module.exports = options => {
 	const karmaConfig = {
 		basePath: options.cwd,
 
-		frameworks: [ 'mocha', 'sinon-chai' ],
+		frameworks: [ 'mocha', 'sinon-chai', 'webpack' ],
 
 		files: [ options.entryFile ],
 
@@ -133,7 +134,7 @@ function getWebpackConfiguration( options ) {
 			rules: [
 				{
 					test: /\.svg$/,
-					use: [ 'raw-loader' ]
+					use: 'raw-loader'
 				},
 				{
 					test: /\.css$/,
@@ -150,20 +151,20 @@ function getWebpackConfiguration( options ) {
 						'css-loader',
 						{
 							loader: 'postcss-loader',
-							options: getPostCssConfig( {
-								themeImporter: {
-									themePath: require.resolve(
-										path.join( options.cwd, 'node_modules', '@ckeditor', 'ckeditor5-theme-lark' )
-									)
-								},
-								minify: true
-							} )
+							options: {
+								postcssOptions: getPostCssConfig( {
+									themeImporter: {
+										themePath: getThemePath( options.cwd )
+									},
+									minify: true
+								} )
+							}
 						}
 					]
 				},
 				{
 					test: /\.(txt|html|rtf)$/,
-					use: [ 'raw-loader' ]
+					use: 'raw-loader'
 				}
 			]
 		},
@@ -176,7 +177,8 @@ function getWebpackConfiguration( options ) {
 	};
 
 	if ( options.sourceMap ) {
-		config.devtool = 'inline-source-map';
+		// Available list: https://webpack.js.org/configuration/devtool/.
+		config.devtool = 'eval-cheap-module-source-map';
 	}
 
 	if ( options.coverage ) {
@@ -185,7 +187,7 @@ function getWebpackConfiguration( options ) {
 				test: /\.js$/,
 				loader: 'istanbul-instrumenter-loader',
 				include: path.join( options.cwd, 'src' ),
-				query: {
+				options: {
 					esModules: true
 				}
 			}

packages/ckeditor5-package-tools/lib/utils/get-theme-path.js

@@ -0,0 +1,26 @@
+/**
+ * @license Copyright (c) 2020-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+/* eslint-env node */
+
+const path = require( 'path' );
+
+/**
+ * Returns an absolute path to the main file of the `@ckeditor/ckeditor5-theme-lark` package.
+ *
+ * The function does the same as what does `require.resolve()`. However, there is no option for mocking it in tests,
+ * hence the value is obtained manually.
+ *
+ * @param {String} cwd
+ * @return {String}
+ */
+module.exports = function getThemePath( cwd ) {
+	const packagePath = path.join( cwd, 'node_modules', '@ckeditor', 'ckeditor5-theme-lark' );
+	const packageJson = require( path.join( packagePath, 'package.json' ) );
+
+	return path.join( packagePath, packageJson.main );
+};

packages/ckeditor5-package-tools/lib/utils/get-webpack-config-dll.js

@@ -14,6 +14,7 @@ const webpack = require( 'webpack' );
 const TerserPlugin = require( 'terser-webpack-plugin' );
 const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
 const { getPostCssConfig } = require( '@ckeditor/ckeditor5-dev-utils' ).styles;
+const getThemePath = require( './get-theme-path' );
 
 module.exports = options => {
 	const packageJson = require( path.join( options.cwd, 'package.json' ) );
@@ -35,6 +36,10 @@ module.exports = options => {
 			manifest: require( ckeditor5manifestPath ),
 			scope: 'ckeditor5/src',
 			name: 'CKEditor5.dll'
+		} ),
+		new webpack.ProvidePlugin( {
+			process: 'process/browser',
+			Buffer: [ 'buffer', 'Buffer' ]
 		} )
 	];
 
@@ -102,32 +107,18 @@ module.exports = options => {
 						'css-loader',
 						{
 							loader: 'postcss-loader',
-							options: getPostCssConfig( {
-								themeImporter: {
-									themePath: getThemePath( options.cwd )
-								},
-								minify: true
-							} )
+							options: {
+								postcssOptions: getPostCssConfig( {
+									themeImporter: {
+										themePath: getThemePath( options.cwd )
+									},
+									minify: true
+								} )
+							}
 						}
 					]
 				}
 			]
 		}
 	};
 };
-
-/**
- * Returns an absolute path to the main file of the `@ckeditor/ckeditor5-theme-lark` package.
- *
- * The function does the same as what does `require.resolve()`. However, there is no option for mocking it in tests,
- * hence the value is obtained manually.
- *
- * @param {String} cwd
- * @return {String}
- */
-function getThemePath( cwd ) {
-	const packagePath = path.join( cwd, 'node_modules', '@ckeditor', 'ckeditor5-theme-lark' );
-	const packageJson = require( path.join( packagePath, 'package.json' ) );
-
-	return path.join( packagePath, packageJson.main );
-}

packages/ckeditor5-package-tools/lib/utils/get-webpack-config-server.js

@@ -11,11 +11,16 @@ const path = require( 'path' );
 const webpack = require( 'webpack' );
 const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
 const { getPostCssConfig } = require( '@ckeditor/ckeditor5-dev-utils' ).styles;
+const getThemePath = require( './get-theme-path' );
 
 module.exports = options => {
 	const webpackPlugins = [
 		new webpack.DefinePlugin( {
 			EDITOR_LANGUAGE: JSON.stringify( options.language )
+		} ),
+		new webpack.ProvidePlugin( {
+			process: 'process/browser',
+			Buffer: [ 'buffer', 'Buffer' ]
 		} )
 	];
 
@@ -38,7 +43,7 @@ module.exports = options => {
 		entry: path.join( options.cwd, 'sample', 'ckeditor.js' ),
 
 		output: {
-			filename: 'script.dist.js',
+			filename: 'ckeditor.dist.js',
 			path: path.join( options.cwd, 'sample' )
 		},
 
@@ -59,7 +64,7 @@ module.exports = options => {
 			rules: [
 				{
 					test: /\.svg$/,
-					use: [ 'raw-loader' ]
+					use: 'raw-loader'
 				},
 				{
 					test: /\.css$/,
@@ -76,14 +81,14 @@ module.exports = options => {
 						'css-loader',
 						{
 							loader: 'postcss-loader',
-							options: getPostCssConfig( {
-								themeImporter: {
-									themePath: require.resolve(
-										path.join( options.cwd, 'node_modules', '@ckeditor', 'ckeditor5-theme-lark' )
-									)
-								},
-								minify: true
-							} )
+							options: {
+								postcssOptions: getPostCssConfig( {
+									themeImporter: {
+										themePath: getThemePath( options.cwd )
+									},
+									minify: true
+								} )
+							}
 						}
 					]
 				}

packages/ckeditor5-package-tools/package.json

@@ -14,6 +14,7 @@
     "@ckeditor/ckeditor5-dev-utils": "^26.0.0",
     "@ckeditor/ckeditor5-dev-env": "^26.0.0",
     "@ckeditor/ckeditor5-dev-webpack-plugin": "^26.0.0",
+    "buffer": "^6.0.3",
     "chai": "^4.3.4",
     "css-loader": "^5.2.7",
     "istanbul-instrumenter-loader": "^3.0.1",
@@ -26,19 +27,21 @@
     "karma-sinon": "^1.0.5",
     "karma-sinon-chai": "^2.0.2",
     "karma-sourcemap-loader": "^0.3.8",
-    "karma-webpack": "^4.0.2",
+    "karma-webpack": "^5.0.0",
     "minimist": "^1.2.5",
     "mocha": "^7.2.0",
-    "postcss-loader": "^3.0.0",
+    "process": "^0.11.10",
+    "postcss": "^7.0.39",
+    "postcss-loader": "^4.3.0",
     "raw-loader": "^4.0.2",
     "sinon": "^9.2.4",
     "sinon-chai": "^3.7.0",
-    "style-loader": "^1.3.0",
+    "style-loader": "^2.0.0",
     "stylelint": "^13.13.1",
     "stylelint-config-ckeditor5": "^2.0.1",
     "terser-webpack-plugin": "^3.0.2",
-    "webpack": "^4.46.0",
-    "webpack-dev-server": "^4.1.0"
+    "webpack": "^5.58.1",
+    "webpack-dev-server": "^4.3.1"
   },
   "devDependencies": {
     "chai": "^4.3.4",

packages/ckeditor5-package-tools/tests/utils/generate-entry-file.js

@@ -54,10 +54,9 @@ describe( 'lib/utils/generate-entry-file', () => {
 	} );
 
 	afterEach( () => {
-		mockery.deregisterAll();
-		mockery.disable();
 		sinon.restore();
 		clock.restore();
+		mockery.disable();
 	} );
 
 	it( 'should be a function', () => {