如何在Ionic v2中扩展默认的webpack配置 [英] How to extend default webpack config in Ionic v2

问题描述

我想扩展离子的默认webpack配置。具体来说，我想添加一个别名来解析模块，这样我就可以按照绝对路径导入模块，而不是相对的路径：

I'd like to extend the default webpack config of ionic. Specifically, I'd like to add an alias for resolving modules so that I can import modules by their absolute path, rather than a relative one:

而不是导入类似的模块这个：

Instead of importing modules like this:

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

我想

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

其中 @app 是别名根源目录。

在其他项目中，我可以通过在webpack配置中添加这样的东西来实现这一点：

In other projects I was able to do this by adding something like this to the webpack config:

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

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

I'm not sure how to do this with Ionic without overriding the default webpack config.

推荐答案

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

You may want to copy the existing webpack.config.js file, modify it and configure to use it instead of the initial one.

以下是步骤

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

根据需要修改复制的文件

Modify the copied file as required

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

In the file package.json from your project add:

config：{
ionic_bundler：webpack，
ionic_webpack：。/ config / webpack.config.js
}

这篇关于如何在Ionic v2中扩展默认的webpack配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！