ionic-framework - 如何在 Ionic v2 中扩展默认 webpack 配置

Question

我想扩展 ionic 的默认 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('./'),
        }
    },
    ...
};

我不确定如何在不覆盖默认 webpack 配置的情况下使用 Ionic 执行此操作。

Answer 1

Module path mapping in @Ionic version - 3.14.0

万一有人在找出确切的更改以使其正常工作时遇到类似的麻烦。

在 ionic 3(版本 3.14.0)中，为了得到 别名 映射工作，您必须在 中定义路径映射webpack.config.js & tsconfig.json

1. package.json

要使用自定义 webpack 配置，请配置您的 package.json加载您的自定义 webpack.config.js .

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

2. config/webpack.config.js

引用现有的 webpack

定义别名路径

将别名与默认 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)
};

3. config/test/webpack.config.js

引用现有的 webpack

定义别名路径

将别名与默认 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);

4. 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包:

@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