How to extend default webpack configuration in Ionic v2

Question

I would like to extend the standard webpack configuration for ionic. In particular, I would like to add an alias for resolving modules so that I can import modules by their absolute path, and not relative:

Instead of importing such modules:

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

I want

 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 configuration:

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

I am not sure how to do this with Ionic without overriding the default webpack configuration.

Answer 1

You can copy the existing webpack.config.js file, modify it and configure it to use it instead of the original one.

Following are the steps

• In the root folder of your project, create a configuration folder and copy the webpack.config.js file there (this file is located in ..\node_modules\@ionic\app-scripts\config

• Modify the copied file if necessary.

• In the package.json file from your project, add:

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

Answer 2

The accepted answer works fine, but when updating the app-script you will have to update webpack.config.js . Therefore, instead of copying require code, it is 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 do not have to update config every time you update app-script

Answer 3

Display module path in @Ionic version - 3.14.0

If someone is faced with similar problems, to find out exactly what changes will be made, follow these steps.

In ionic 3 (version 3.14.0), to work with an alias , you need to define the path mapping in both webpack.config.js and > tsconfig.json

• package.json

To use the webpack custom configuration, configure package.json to load the custom webpack.config.js .

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

2. config /webpack.config.js

• Link to an existing web package
• Define an alias path

• Merge alias with default setting for 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); 

3. tsconfig.json

• Define baseUrl and paths in tsconfig.json as follows:

    { "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, the answer is awesome, but it does 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 

---

The default configuration has two parts dev and prod, so if you change the user configuration as it seems, everything works

 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, an alias does not work if you do not use this fix (let the 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 ion information:

 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