Comment étendre par défaut webpack config Ionique v2

Je voudrais étendre la valeur par défaut webpack config de l'ionique. Plus précisément, je voudrais ajouter un alias pour la résolution des modules afin que je puisse importer des modules par leur chemin d'accès absolu, plutôt que par un relatif:

Au lieu de l'importation des modules comme ceci:

import { SomeComponent } from '../../components/some.component.ts';

Je veux

import { SomeComponent } from '@app/components/some.component.ts';

où @app est un alias de la racine du répertoire source.

Dans d'autres projets, j'ai pu le faire en ajoutant quelque chose comme cela pour le webpack config:

module.exports = {
    ...   
    resolve: {
        extensions: ['.ts', '.js'],
        alias: {
            '@app': path.resolve('./'),
        }
    },
    ...
};

Je ne suis pas sûr de savoir comment le faire avec Ionique sans écraser la valeur par défaut webpack config.

InformationsquelleAutor qzr | 2017-01-06
  1. 16

    Vous pouvez copier l'existant webpack.config.js fichier, le modifier et le configurer pour l'utiliser à la place de la première.

    Voici les étapes

    1. Sur le dossier racine de votre projet de créer dossier config et copier le fichier webpack.config.js, il (ce fichier est situé dans ..\node_modules\@ionic\app-scripts\config

    2. Modifier le fichier copié, comme l'exige

    3. Dans le fichier package.json de votre projet d'ajouter:

      "config": {
      "ionic_bundler": "webpack",
      "ionic_webpack": "./config/webpack.config.js"
      }

    • Cela n'a pas fonctionné pour moi. Je reçois le message "fichier de configuration "...\config\webpack.config.js" non trouvé. À l'aide de valeurs par défaut à la place.". Mais si je copie le chemin d'accès et le coller dans un explorateur de fichier, le fichier est trouvé. Donc, il existe, mais en quelque sorte webpack ne peux pas le trouver et utilise la valeur par défaut au lieu de :s. Des idées? (j'ai googlé ce beaucoup mais pas trouvé un dans une situation similaire)
    • aucune idée, sauf que le chemin d'accès est incorrect.
    InformationsquelleAutor Alex Ryltsov
  2. 31

    La accepté de répondre fonctionne très bien, mais vous devrez mettre à jour webpack.config.js chaque fois que vous mettez à jour app-script. Donc, au lieu de copier le code, require dans webpack.config.js

    package.json

      "config": {
    "ionic_webpack": "./config/webpack.config.js"
  }

    webpack.config.js

    const webpackConfig = require('../node_modules/@ionic/app-scripts/config/webpack.config');
webpackConfig.resolve = {
                    extensions: ['.ts', '.js'],
                    alias: {
                            '@app': path.resolve('./'),
                            }
                  }

    Dans la plupart des cas, vous pouvez suivre cette approche et vous n'aurez pas à mettre à jour config chaque fois que vous mettez à jour app-script

    • J'ai essayé de suivre le module.les exportations = function () { webpackConfig.résoudre = { extensions: ['.ts', '.js'], alias: { '@app': chemin d'accès.résoudre('./src/app') } }; mais les erreurs Ne peut pas trouver le module '@app/onglets/onglet". Avez-vous modifier baseurl ou des chemins d'accès dans le tsConfig.json ainsi?
    • vous aurez envie d'ajouter une importation de "chemin" à votre webpack.config.js (c'est à dire "const path = require('chemin');")
    InformationsquelleAutor raj
  3. 13

    Chemin d'accès du Module de cartographie dans @Ionique version - 3.14.0

    Au cas ou quelqu'un ayant des difficultés à comprendre exacte des changements pour obtenir ce travail.

    Ionique dans les 3 (version 3.14.0), afin d'obtenir alias cartographie de travail, vous devez définir le chemin de la cartographie à la fois dans webpack.config.js & tsconfig.json

    1. paquet.json

    Personnalisées webpack de config, configurer votre package.json pour charger votre personnalisé webpack.config.js.

    "config": {
    "ionic_webpack": "./config/webpack.config.js"
  }
    1. config/webpack.config.js
    • De référence existants webpack
    • Définition de l'alias de chemin

    • De fusion de l'alias par défaut webpack config
      ...

      const path = require('path');
const { dev, prod } = require('@ionic/app-scripts/config/webpack.config');
const webpackMerge = require('webpack-merge');

const customConfig = {
  resolve: {
    alias: {
      '@app': path.resolve('src/app'),
      '@pages': path.resolve('src/app/pages'),
      '@constants': path.resolve('src/app/constants'),
      '@components': path.resolve('src/app/components'),
      "@shared": path.resolve('src/app/shared')
    }
  }
};

module.exports = {
     dev: webpackMerge(dev, customConfig),
     prod: webpackMerge(prod, customConfig)
};
    1. config/test/webpack.config.js
    • De référence existants webpack
    • Définition de l'alias de chemin

    • De fusion de l'alias par défaut webpack config
      ...

      const path = require('path');
const webpackDefault = require('@ionic/app-scripts/config/webpack.config');
const webpackMerge = require('webpack-merge');

const customConfig = {
  resolve: {
    alias: {
      '@app': path.resolve('src/app'),
      '@pages': path.resolve('src/app/pages'),
      '@constants': path.resolve('src/app/constants'),
      '@components': path.resolve('src/app/components'),
      "@shared": path.resolve('src/app/shared')
    }
  }
};

module.exports = webpackMerge(webpackDefault, customConfig);
    1. tsconfig.json

    • Définir baseUrl & paths dans tsconfig.json comme suit:

        {
   "compilerOptions": {
     "baseUrl": "./src",
     "paths": {
       "@app/*": ["app/*"],
       "@pages/*": ["app/pages/*"],
       "@constants/*": ["app/constants/*"],
       "@components/*": ["app/components/*"],
       "@shared/*": ["app/shared/*"]
     }
   },
 }

    Réf: Mon ionique env info:

    cli paquets:

    @ionic/cli-plugin-proxy : 1.4.13
@ionic/cli-utils        : 1.14.0
ionic (Ionic CLI)       : 3.14.0

    mondial des paquets:

    cordova (Cordova CLI) : 7.1.0

    local des paquets:

    @ionic/app-scripts : 2.1.4
Cordova Platforms  : android 6.2.3 ios 4.5.1
Ionic Framework    : ionic-angular 3.6.0
    • Suggéré un commentaire pour ajouter prod/champs d'essais pour cette réponse pour travailler correctement avec le nouveau ionique config. Il est également intéressant de mentionner le test webpack config (./test-config/webpack.test.js) doit être mis à jour.
    • Merci, j'ai mis à jour la réponse à inclure ./test-config/webpack.test.js ainsi.
    • Douce, merci pour le faire. Quelle que soit la raison, les dieux rejeté mon edit, allez comprendre. Cela devrait certainement être sélectionnée comme la réponse correcte à cette question.
    InformationsquelleAutor Maverick09
  4. 3

    Hi Maverick09 réponse est génial, mais il ne fonctionne pas pour moi, je suis en utilisant cette configuration:

    cli paquets: 

    @ionic/cli-utils  : 1.15.2
ionic (Ionic CLI) : 3.15.2

    local des paquets:

    @ionic/app-scripts : 3.0.1
Ionic Framework    : ionic-angular 3.8.0

    Système:

    Node : v6.10.0
npm  : 3.10.10
OS   : Windows 10

    par défaut configuraion a deux pièces de dev et de prod donc, si vous changez de configuration personnalisé comme cela semble tout de travail

    const customConfig = {
    dev: {
        resolve: {
            alias: {
                '@app': path.resolve('src/app'),
                '@pages': path.resolve('src/pages'),
                '@common': path.resolve('src/common'),
                '@storyboards': path.resolve('src/storyboards'),
                "@locale": path.resolve('src/locale')
            }
        }
    },
    prod: {
        resolve: {
            alias: {
                '@app': path.resolve('src/app'),
                '@pages': path.resolve('src/pages'),
                '@common': path.resolve('src/common'),
                '@storyboards': path.resolve('src/storyboards'),
                "@locale": path.resolve('src/locale')
            }
        }
    }
};
    • Avez-vous eu de travail ou d'attendre de moi de prendre un coup d'oeil à la configuration?
    • il workes pour moi
    InformationsquelleAutor Rashid Mousavy Khoshrou
  5. 0

    Dans les versions récentes de ionique, alias n'est pas de travail, sauf si vous utilisez ce correctif (laissez tapuscrit chargeur de connaître l'alias):
    tsconfig.json

      "compilerOptions": {
...
    "baseUrl":  "./src",
    "paths": {
      "@app/config": ["config/config"]
    }
  }
...

    de crédit: https://github.com/ionic-team/ionic-app-scripts/pull/683#issuecomment-294078919

    Mon ionique info:

    cli packages: (/Users/.../node_modules)

@ionic/cli-plugin-cordova       : 1.6.2
@ionic/cli-plugin-ionic-angular : 1.4.1
@ionic/cli-utils                : 1.7.0
ionic (Ionic CLI)               : 3.7.0

    mondial des paquets:

    Cordova CLI : 7.0.1

    local des paquets:

    @ionic/app-scripts : 2.1.3
Cordova Platforms  : none
Ionic Framework    : ionic-angular 3.6.0

    Système:

    Node       : v6.9.5
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b 
ios-deploy : 1.9.1 
ios-sim    : 5.0.13 
npm        : 5.3.0
    • avez-vous encore pour créer webpack.config.js pour définir des alias de chemin ou ce seront les seuls à travailler ?
    • À mon avis, il ne fonctionnera pas sans webpack partie. Parce que webpack est censé concat fichiers ensemble et ainsi de remplacer les alias. Tapuscrit partie est tout simplement la fixation de la machine des erreurs causées par l'utilisation d'alias.
    InformationsquelleAutor Luckylooke