Webpack 5

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

Warning: Wenn Sie React 18 verwenden, müssen Sie Webpack 5 verwenden. Webpack 4 wird nicht unterstützt.

Migration auf 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.

2. Installieren Sie die folgenden Pakete:

   • @jutro/browserslist-config

3. Entfernen Sie die webpack-Abhängigkeit aus der package.json-Datei Ihrer App.

4. Aktualisieren Sie Ihr start-webpack-Skript in der package.json-Datei wie folgt:

   Old:

   "start-webpack": "node ./scripts/serve.mjs"
   New:

   "start-webpack": "jutro-tools app serve"

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

   Old:

   "build-webpack": "cross-env GENERATE_SOURCEMAP=false node ./scripts/build.mjs"
   New:

   "build-webpack": "cross-env GENERATE_SOURCEMAP=false jutro app:build"

6. Entfernen Sie den veralteten Ordner scripts in Ihrem Projektstamm.

Benutzerdefinierte Symbole

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

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

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:

Theme.scss

$fonts-root: '~@jutro/theme/assets/fonts';

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

Webpack-5-föderiertes Micro Frontend

Weitere Informationen finden Sie in unseren Dokumenten zur Verwendung von Micro Frontends.

Webpack-5-Konfigurationsdatei

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:

// 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' }
};