Как расширить конфигурацию webpack по умолчанию в Ionic v2

Я хотел бы расширить стандартную конфигурацию webpack для ионной. В частности, я хотел бы добавить псевдоним для разрешения модулей, чтобы я мог импортировать модули по их абсолютному пути, а не относительный:

Вместо импорта таких модулей:

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

Я хочу

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

где @app является псевдонимом для корневого исходного каталога.

В других проектах я смог сделать это, добавив что-то вроде этого в конфигурацию webpack:

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

Я не уверен, как это сделать с помощью Ionic без переопределения конфигурации webpack по умолчанию.

Ответы

Ответ 1

Вы можете скопировать существующий файл webpack.config.js, изменить его и настроить, чтобы использовать его вместо исходного.

Ниже приведены шаги

В корневой папке вашего проекта создайте папку конфигурации и скопируйте файл webpack.config.js там (этот файл находится в ..\node_modules\@ionic\app-scripts\config
При необходимости измените скопированный файл
В файле package.json из вашего проекта добавьте:

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

Ответ 2

Принятый ответ работает нормально, но при обновлении app-script вам придется обновлять webpack.config.js. Поэтому вместо копирования кода require он находится в 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('./'),
                            }
                  }

В большинстве случаев вы можете следовать этому подходу, и вам не придется обновлять config каждый раз, когда вы обновляете app-script

Ответ 3

Отображение пути модуля в версии @Ionic - 3.14.0

Если кто-то сталкивается с подобными проблемами, чтобы выяснить, какие именно изменения будут выполнены, выполните следующие действия.

В ionic 3 (версия 3.14.0), чтобы работать с псевдоним, вам нужно определить отображение пути как в webpack.config.js, так и > tsconfig.json

package.json

Чтобы использовать настраиваемую конфигурацию webpack, настройте package.json для загрузки пользовательского webpack.config.js.

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

конфиг /webpack.config.js

Ссылка на существующий веб-пакет
Определите путь псевдонима

Слить псевдоним с настройкой по умолчанию для 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);

tsconfig.json

Определите baseUrl и paths в tsconfig.json следующим образом:

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

Ref: My ionic env info:

cli packages:

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

глобальные пакеты:

cordova (Cordova CLI) : 7.1.0

локальные пакеты:

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

Ответ 4

Привет Maverick09 ответ потрясающий, но он не работает для меня. Я использую эту конфигурацию:

cli packages:

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

локальные пакеты:

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

Система:

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

Конфигурация по умолчанию имеет две части dev и prod, поэтому, если вы меняете пользовательскую конфигурацию, как это кажется, все работает

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

Ответ 5

В последних версиях ионных псевдоним не работает, если вы не используете это исправление (пусть typescript загрузчик знает псевдоним): tsconfig.json

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

кредит: https://github.com/ionic-team/ionic-app-scripts/pull/683#issuecomment-294078919

Моя ионная информация:

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

глобальные пакеты:

Cordova CLI : 7.0.1

локальные пакеты:

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

Система:

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