Question

我想扩展离子的默认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

接受的答案正常，但每次更新webpack.config.js时都必须更新app-script。因此，不要在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

Answer 2

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

以下是步骤

在项目的根文件夹中创建配置文件夹并将文件webpack.config.js复制到那里（此文件位于..\node_modules\@ionic\app-scripts\config
根据需要修改复制的文件
在项目的package.json文件中添加：

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

Answer 3

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

让某人遇到类似的麻烦，找出确切的变化，以使其发挥作用。

在离子3（版本3.14.0）中，为了使别名映射有效，您必须在 webpack.config.js 和放大器中定义路径映射;的 tsconfig.json

的package.json


要使用自定义网络包配置，请将package.json配置为加载自定义webpack.config.js。

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



配置/ 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) };



配置/测试/ 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);



tsconfig.json


定义baseUrl＆amp; paths中的tsconfig.json如下：

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


参考：我的离子env信息：

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

默认配置有两个部分开发和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

在离子的最新版本中，别名不起作用，除非您使用此修复程序（让打字机加载程序知道别名）： 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

如何在Ionic v2中扩展默认的webpack配置

5 个答案:

cli包：

全球包：

本地包：