web-dev-qa-db-fra.com

Comment étendre la configuration par défaut du webpack dans Ionic v2

Je voudrais étendre la configuration webpack par défaut de ionic. Plus précisément, je voudrais ajouter un alias pour résoudre les modules afin de pouvoir importer des modules par leur chemin absolu, plutôt que relatif:

Au lieu d'importer des modules comme celui-ci:

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

Je veux

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

où @app est un alias pour le répertoire source racine.

Dans d'autres projets, j'ai pu le faire en ajoutant quelque chose comme ça à la configuration du webpack:

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

Je ne sais pas comment faire cela avec Ionic sans remplacer la configuration par défaut du webpack.

ionic-frameworkwebpackionic2
27
qzr

Vous souhaiterez peut-être copier le fichier webpack.config.js existant, le modifier et configurer pour l'utiliser à la place du fichier initial.

Voici les étapes

  1. Dans le dossier racine de votre projet, créez le dossier config et copiez le fichier webpack.config.js là (ce fichier se trouve dans ..\node_modules\@ionic\app-scripts\config

  2. Modifiez le fichier copié selon vos besoins

  3. Dans le fichier package.json de votre projet, ajoutez:

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

16
Alex Ryltsov

La réponse acceptée fonctionne bien mais vous devrez mettre à jour webpack.config.js chaque fois que vous mettez à jour app-script. Donc, au lieu de copier du 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 mise à jour app-script

31
raj

Mappage du chemin du module dans la version @Ionic - 3.14.0

Dans le cas où quelqu'un a du mal à trouver les changements exacts pour que cela fonctionne.

Dans ionic 3 (version 3.14.0), pour que alias mappage fonctionne, vous devrez définir le mappage de chemin à la fois dans webpack.config.js & tsconfig.json

  1. package.json

Pour utiliser la configuration du webpack personnalisé, configurez votre package.json Pour charger votre webpack.config.js Personnalisé.

"config": {
    "ionic_webpack": "./config/webpack.config.js"
  }
  1. config/webpack.config.js
  • Référencez le webpack existant
  • Définissez le chemin d'alias

  • Fusionnez l'alias avec la configuration par défaut du webpack ...

    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
  • Référencez le webpack existant
  • Définissez le chemin d'alias

  • Fusionnez l'alias avec la configuration par défaut du webpack ...

    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éfinissez 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: My ionic env info:

packages cli:

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

packages globaux:

cordova (Cordova CLI) : 7.1.0

packages locaux:

@ionic/app-scripts : 2.1.4
Cordova Platforms  : Android 6.2.3 ios 4.5.1
Ionic Framework    : ionic-angular 3.6.0
13
Maverick09

Salut Maverick09 réponse est génial mais cela n'a pas fonctionné pour moi J'utilise cette configuration:

packages cli:

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

packages locaux:

@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

la configuration par défaut a deux parties dev et prod donc si vous changez la configuration personnalisée comme celle-ci semble tout fonctionner

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')
            }
        }
    }
};
3
Rashid Mousavy Khoshrou

Dans les versions récentes d'ionic, l'alias ne fonctionne que si vous utilisez ce correctif (laissez le chargeur TypeScript connaître l'alias): tsconfig.json

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

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

Mon ionic 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

packages globaux:

Cordova CLI : 7.0.1

packages locaux:

@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
0
Luckylooke