Ionicのwebpack.config.jsを拡張する

Ionicでwebpack.config.jsを拡張する手順

1 ルート層にconfigフォルダを作り、その中にwebpack.config.jsを作成
2 webpack.config.jsを以下のように書き換える

config/webpack.config.js

const webpackConfig = require('../node_modules/@ionic/app-scripts/config/webpack.config');
// ここから拡張したい内容を追加

3 package.jsonに以下を追加

package.json

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

例えばaliasを追加してimportを便利にしたり出来ます。

config/webpack.config.js

const webpackConfig = require('../node_modules/@ionic/app-scripts/config/webpack.config');
webpackConfig.resolve = {
    extensions: ['.ts', '.js'],
    alias: {
        '@component': path.join(__dirname, '../src/components'),
        '@page': path.join(__dirname, '../src/pages'),
    }
}

sample.ts

import { CardPage } from '@page/hoge';
/* src/pages/hoge.ts */

import { CardPage } from '@component/hoge';
/* src/components/hoge.ts */