如何在 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

接受的答案可以正常工作，但每次更新 app-script 时都必须更新 webpack.config.js。所以不要复制代码，requirewebpack.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('./'),
                            }
                  }

在大多数情况下，您可以采用这种方法，并且您不必在每次更新 app-script 时都更新 config

Answer 2

您可能想要复制现有的 webpack.config.js 文件，对其进行修改并配置为使用它而不是初始文件。

步骤如下

1. 在项目的根文件夹中创建配置文件夹并将文件webpack.config.js复制到那里（该文件位于..\node_modules\@ionic\app-scripts\config

2. 根据需要修改复制的文件

3. 在您项目的文件package.json 中添加：

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

Answer 3

@Ionic 版本中的模块路径映射 - 3.14.0

以防有人遇到类似的麻烦来找出确切的更改以使其正常工作。

在 ionic 3（版本 3.14.0）中，为了使 alias 映射正常工作，您必须在 webpack.config.js 和 中定义路径映射>tsconfig.json

1. package.json

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

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

1. 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)
  };
  

1. 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

• 在tsconfig.json 中定义baseUrl 和paths，如下所示：

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

参考：我的 ionic 环境信息：

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

Answer 4

嗨，Maverick09 的回答很棒，但它对我不起作用，我正在使用这种配置：

cli 包：

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

Answer 5

在 ionic 的最新版本中，除非您使用此修复程序（让 typescript loader 知道别名），否则别名不起作用： 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