How to extend default webpack config in Ionic v2

Question

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

I want to

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

where @app is an alias for the root source directory.

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('./'),
        }
    },
    ...
};

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

Answer 1

The accepted answer works fine but you will have to update webpack.config.js each time you update app-script. So instead of copying code, require it in 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('./'),
                            }
                  }

In most cases you can follow this approach and you wont have to update config each time you update app-script