Custom CKEditor build: unminified with sourcemaps?

Question

Assume a customized build of CKEditor5.

By default, the builds seem uncompressed - this means tracebacks are difficult to decipher.

Can someone make an example of a non-compressed / non-minified build with source maps with webpack?

Answer 1

Update

I was able to achieve this by (tested with v37.0.1):

• package.json: Removing terser-webpack-plugin
• webpack.config.js:
  • Removing terser-webpack-plugin / TerserPlugin
  • Adding mode: 'development'

See also: https://stackoverflow.com/a/69322037/1396928

Example

Here's an example of a config that generates an uncompressed webpack build:

/**
 * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */

'use strict';

/* eslint-env node */

const path = require( 'path' );
const webpack = require( 'webpack' );
const { bundler, styles } = require( '@ckeditor/ckeditor5-dev-utils' );
const { CKEditorTranslationsPlugin } = require( '@ckeditor/ckeditor5-dev-translations' );

module.exports = {
    devtool: 'source-map',
    mode: 'development',
    performance: { hints: false },

    entry: path.resolve( __dirname, 'src', 'ckeditor.ts' ),

    output: {
        // The name under which the editor will be exported.
        library: 'BalloonEditor',

        path: path.resolve( __dirname, 'build' ),
        filename: 'ckeditor.js',
        libraryTarget: 'umd',
        libraryExport: 'default'
    },

    optimization: {
        minimizer: []
    },

    plugins: [
        new CKEditorTranslationsPlugin( {
            // UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
            // When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor.js).
            language: 'en',
            additionalLanguages: 'all'
        } ),
        new webpack.BannerPlugin( {
            banner: bundler.getLicenseBanner(),
            raw: true
        } )
    ],

    module: {
        rules: [
            {
                test: /\.svg$/,
                use: [ 'raw-loader' ]
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            injectType: 'singletonStyleTag',
                            attributes: {
                                'data-cke': true
                            }
                        }
                    },
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: styles.getPostCssConfig( {
                                themeImporter: {
                                    themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                                },
                                minify: true
                            } )
                        }
                    }
                ]
            },
            {
                test: /\.ts$/,
                use: [ 'ts-loader' ]
            }
        ]
    },

    resolve: {
        extensions: [ '.ts', '.js', '.json' ]
    }
};

The diff

Assume ckeditor5-build-balloon-block @ v37.0.1:

diff --git a/packages/ckeditor5-build-balloon-block/package.json b/packages/ckeditor5-build-balloon-block/package.json
index fad9b6a186..afc7e293d4 100644
--- a/packages/ckeditor5-build-balloon-block/package.json
+++ b/packages/ckeditor5-build-balloon-block/package.json
@@ -59,7 +59,6 @@
     "postcss-loader": "^4.3.0",
     "raw-loader": "^4.0.1",
     "style-loader": "^2.0.0",
-    "terser-webpack-plugin": "^4.2.3",
     "ts-loader": "^9.3.0",
     "typescript": "^4.8.4",
     "webpack": "^5.58.1",
diff --git a/packages/ckeditor5-build-balloon-block/webpack.config.js b/packages/ckeditor5-build-balloon-block/webpack.config.js
index c3efd15575..b0c5060bc4 100644
--- a/packages/ckeditor5-build-balloon-block/webpack.config.js
+++ b/packages/ckeditor5-build-balloon-block/webpack.config.js
@@ -11,10 +11,10 @@ const path = require( 'path' );
 const webpack = require( 'webpack' );
 const { bundler, styles } = require( '@ckeditor/ckeditor5-dev-utils' );
 const { CKEditorTranslationsPlugin } = require( '@ckeditor/ckeditor5-dev-translations' );
-const TerserPlugin = require( 'terser-webpack-plugin' );

 module.exports = {
        devtool: 'source-map',
+ mode: 'development',
        performance: { hints: false },

        entry: path.resolve( __dirname, 'src', 'ckeditor.ts' ),
@@ -30,18 +30,7 @@ module.exports = {
        },

        optimization: {
-           minimizer: [
-                   new TerserPlugin( {
-                           sourceMap: true,
-                           terserOptions: {
-                                   output: {
-                                           // Preserve CKEditor 5 license comments.
-                                           comments: /^!/
-                                   }
-                           },
-                           extractComments: false
-                   } )
-           ]
+         minimizer: []
        },

        plugins: [

When the package is published, tracebacks for CKEditor5 and CKEditor5 plugins will now be unminified and much more legible.