How to extend default webpack config in Ionic v2

问题:

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.

回答1:

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

1. 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

2. Modify the copied file as required

3. In the file package.json from your project add:

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

回答2:

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

回答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

1. 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"
  }

2. 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)
  };
  

3. 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);
  

4. 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

回答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')
            }
        }
    }
};

回答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