How to extend default webpack config in Ionic v2 - ionic-framework

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

Answer 2

You may want to copy the existing webpack.config.js file, modify it and configure to use it instead of the initial one.
Here are the steps
On the root folder of your project create config folder and copy the file webpack.config.js there (this file is located in ..\node_modules\#ionic\app-scripts\config
Modify the copied file as required
In the file package.json from your project add:
"config": {
"ionic_bundler": "webpack",
"ionic_webpack": "./config/webpack.config.js"
}

Answer 3

Module path mapping in #Ionic version - 3.14.0
Incase someone is having similar trouble to figure out exact changes to get this working.
In ionic 3 (version 3.14.0), in order to get alias mapping working, you will have to define path mapping both in webpack.config.js & tsconfig.json
package.json
To use custom webpack config, configure your package.json to load your custom webpack.config.js.
"config": {
"ionic_webpack": "./config/webpack.config.js"
}
config/webpack.config.js
Reference the existing webpack
Define the alias path
Merge the alias with default webpack config
...
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)
};
config/test/webpack.config.js
Reference the existing webpack
Define the alias path
Merge the alias with default webpack config
...
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
Define baseUrl & paths in tsconfig.json like following:
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"#app/*": ["app/*"],
"#pages/*": ["app/pages/*"],
"#constants/*": ["app/constants/*"],
"#components/*": ["app/components/*"],
"#shared/*": ["app/shared/*"]
}
},
}
Ref: My ionic env info:
cli packages:
#ionic/cli-plugin-proxy : 1.4.13
#ionic/cli-utils : 1.14.0
ionic (Ionic CLI) : 3.14.0
global packages:
cordova (Cordova CLI) : 7.1.0
local packages:
#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

Hi Maverick09 answer is awesome but it did not work for me I am using this configuration:
cli packages:
#ionic/cli-utils : 1.15.2
ionic (Ionic CLI) : 3.15.2
local packages:
#ionic/app-scripts : 3.0.1
Ionic Framework : ionic-angular 3.8.0
System:
Node : v6.10.0
npm : 3.10.10
OS : Windows 10
default configuraion has two parts dev and prod so if you change custom config like this seems every thing working
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

In recent versions of ionic, alias is not working unless you use this fix (let typescript loader know the alias):
tsconfig.json
"compilerOptions": {
...
"baseUrl": "./src",
"paths": {
"#app/config": ["config/config"]
}
}
...
credit: https://github.com/ionic-team/ionic-app-scripts/pull/683#issuecomment-294078919
My ionic info:
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
global packages:
Cordova CLI : 7.0.1
local packages:
#ionic/app-scripts : 2.1.3
Cordova Platforms : none
Ionic Framework : ionic-angular 3.6.0
System:
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