---
title: 'Webpack 5 '
public: false
---

Ab Jutro 8.0.0 verwenden neue Apps standardmäßig Webpack 5.

import WebpackReact18 from '@site/i18n/de/docusaurus-plugin-content-docs/current/partials/_webpack-react-18.mdx';

<WebpackReact18 />

## Migration auf Webpack 5 {#migrating-to-webpack-5}

Befolgen Sie diese Schritte, wenn Sie von Webpack 4 auf Webpack 5 migrieren:

1. Wenn Sie benutzerdefinierte Überschreibungskonfigurationen für Webpack 4 haben, stellen Sie sicher, dass Sie diese auf Webpack 5 übertragen.

1. Installieren Sie die folgenden Pakete:

   - `@jutro/browserslist-config`

1. Entfernen Sie die `webpack`-Abhängigkeit aus der `package.json`-Datei Ihrer App.
1. Aktualisieren Sie Ihr `start-webpack`-Skript in der `package.json`-Datei wie folgt:

   ```json title="Old:"
   "start-webpack": "node ./scripts/serve.mjs"
   ```

   ```json title="New:"
   "start-webpack": "jutro-tools app serve"
   ```

1. Aktualisieren Sie Ihr `build-webpack`-Skript in der `package.json`-Datei wie folgt:

   ```json title="Old:"
   "build-webpack": "cross-env GENERATE_SOURCEMAP=false node ./scripts/build.mjs"
   ```

   ```json title="New:"
   "build-webpack": "cross-env GENERATE_SOURCEMAP=false jutro app:build"
   ```

1. Entfernen Sie den veralteten Ordner `scripts` in Ihrem Projektstamm.

### Benutzerdefinierte Symbole {#custom-icons}

Wenn Sie benutzerdefinierte Symbole rendern, müssen Sie den Pfad zum Symbolordner in Ihrer `.env`-Datei wie folgt ändern:

```
JUTRO_APP_CLIENT_ICONS_PATH=./src/assets/icons
```

### Importieren von Stilen {#importing-styles}

Stellen Sie sicher, dass Ihre `startApp.js`-Datei die Stile wie unten gezeigt importiert:

```js title="startApp.js"
import '@jutro/theme';
import './styles/index.scss';
```

In Ihrer `Theme.scss`-Datei sollten **nur** Schriftarten gespeichert werden. Sehen Sie sich folgendes Beispiel an:

```css title="Theme.scss"
$fonts-root: '~@jutro/theme/assets/fonts';

// ------------------------------------
//   GROUNDED CSS MODULES
// ------------------------------------
@import '~@jutro/theme/assets/fonts/fonts';
```

## Webpack-5-föderiertes Micro Frontend {#webpack-5-federated-micro-frontends}

Weitere Informationen finden Sie in [unseren Dokumenten zur Verwendung von Micro Frontends](./mfe-module-federation.mdx).

## Webpack-5-Konfigurationsdatei {#webpack-5-config-file}

Ihre App ist bereits mit allen Grundeinstellungen für das erfolgreiche Ausführen vorkonfiguriert. Wenn Sie jedoch über nicht standardmäßige Dateien oder andere Anforderungen verfügen, können Sie Webpack 5 konfigurieren, indem Sie eine `overrides.config.js`-Datei zum Stammverzeichnis Ihrer App hinzufügen.

In diesem Beispiel werden alle verfügbaren Überschreibungen beschrieben:

```js title=overrides.config.js
// Overrides structure and API
module.exports = {
  // webpack configuration
  webpack: {
    // configs and feature flags
    config: {
      /**
       * force disable TS checks. TsCheck is enabled by default
       * @default false
       */
      skipTsChecks: false,
      /**
       * Setup extra aliases in webpack config
       * @default undefined
       *
       * Aliases config is object of Record<string, string> type. For more information
       * pleases refer to official webpack documentation
       */
      alias: {},
    },
    /**
     * entries to manage loaders.
     * Do we need more specific entries?
     */
    loaders: {
      /**
       * access to babel-loader which is used for application files
       * by default does nothing and returns input object
       */
      babelLoaderApp: (loader) => loader,
      /**
       * access to babel-loader which is used for @jutro packages processing
       * by default does nothing and returns input object
       */
      babelLoaderPkg: (loader) => loader,
      /**
       * list of extra loaders which should be added to configuration
       * @default undefined
       */
      custom: [],
    },
    /**
     * Add or configure webpack plugins
     * Could be array of plugins or function
     * 1) When array is provided - plugins are added at beginning of list [...clientPlugins, ...defaultPlugins]
     * 2) When function is provided - list of default plugins is passed as argument and list of plugins is expected as result
     * @default undefined
     */
    plugins: (plugins) => [...plugins],
    // plugins: []
    /**
     * Entry point to check/modify configuration after all transformations
     * Receives whole config as an argument and expect finalized configuration as result
     * @default undefined
     */
    final: (config) => ({ ...config }),
    /**
     * Module Federation Block
     * To be fully defined during migration from existing micro frontends solution to webpack module federation
     *
     * Exists to configuration variants: host and module
     */
    moduleFederation: {
      /**
       * required uniq name
       */
      name: 'hostapp',
      // name: 'jutroapp', // a unique micro frontend name in case of federated micro frontend
      /**
       * Host required field
       * Specifies federated packages and origins where they are hosted
       * format:
       * {
       *   [importName]: 'moduleUniqName@url_to_entry_point'
       * }
       * importName - represents import inside of application
       * moduleUniqName - module.name field value from federated module config
       * url_to_entry_point - url to hosted file
       */
      remotes: {},
      /**
       * Module required field
       * Specifies list of entries which should be exposed as federated modules
       *
       * Refer to official webpack module federation docs for more info
       *
       * When 'jutro-app' provided, this is default predefined preset for modules
       * added on basis of regular jutro-app-template
       *
       * Same as:
       * exposes: {
       *    './startApp': './src/startApp',
       * },
       * filename: 'remoteEntry.js';
       */
      exposes: 'jutro-app',
      /**
       * Module optional field
       * Specifies module entry-point file name
       *
       * @default 'remoteEntry.js'
       */
      filename: 'remoteEntry.js',
      /**
       * Entry point to override/extend shared libs
       * Receives default libraries configuration end expect shared
       * libraries configuration
       *
       * Refer to official webpack module federation docs for more info
       *
       * @default undefined
       */
      shared: (sharedDefaults) => ({ ...sharedDefaults }),
    },
  },
  /**
   * project related paths configuration
   * Could be object or function
   *
   * NOTE: When object is provided, setup will try to resolve each
   * field relatively to application root
   *
   * Function receives existing configuration and expects updated one as result
   *
   * @default undefined
   */
  paths: {
    // htmlPath: 'public/index.html',
  },
  // paths: old => ({ ...old, }), // or { pathVariable: 'value' }
};
```