So verlängern Sie die Standard-webpack-config im Ionischen v2
Möchte ich erweitern die Standard-webpack config von ionic. Speziell möchte ich hinzufügen, einen alias für die Lösung Module also kann ich die import-Module, indem Sie deren absoluten Pfad, sondern als eine relative:
Statt Import-Module wie diese:
import { SomeComponent } from '../../components/some.component.ts';
Möchte ich
import { SomeComponent } from '@app/components/some.component.ts';
wo @app
ist ein alias für den root-Quellverzeichnis.
In anderen Projekten, die ich war in der Lage, tun Sie dies, indem Sie so etwas wie dieses, um das webpack config:
module.exports = {
...
resolve: {
extensions: ['.ts', '.js'],
alias: {
'@app': path.resolve('./'),
}
},
...
};
Ich bin mir nicht sicher, wie dies mit den Ionischen, ohne überschreiben der Standard-webpack config.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Möchten Sie vielleicht zu kopieren, die vorhandene webpack.config.js Datei, ändern Sie es und konfigurieren Sie es zu benutzen anstatt den ursprünglichen.
Hier sind die Schritte,
Auf dem root-Ordner Ihres Projekts erstellen, config-Ordner und kopieren Sie die Datei
webpack.config.js
dort (diese Datei befindet sich im..\node_modules\@ionic\app-scripts\config
Ändern Sie die kopierte Datei, wie erforderlich,
In der Datei
package.json
aus Ihrem Projekt hinzufügen:"config": {
"ionic_bundler": "webpack",
"ionic_webpack": "./config/webpack.config.js"
}
Akzeptierte Antwort funktioniert gut, aber Sie müssen aktualisieren
webpack.config.js
jedes mal, wenn Sie aktualisierenapp-script
. Also, anstatt Sie zu kopieren-coderequire
es inwebpack.config.js
package.json
webpack.config.js
In den meisten Fällen können Sie diesem Ansatz Folgen und werden Sie nicht haben, zu aktualisieren
config
jedes mal, wenn Sie aktualisierenapp-script
Incase jemand ähnliche Probleme, um herauszufinden, die genauen änderungen, damit dies funktioniert.
In ionic 3 (version 3.14.0), um alias mapping arbeiten, Sie zu definieren-Pfad-Zuordnung-sowohl in
webpack.config.js
&tsconfig.json
Benutzerdefinierte webpack config, konfigurieren Sie Ihre
package.json
laden Sie Ihren benutzerdefiniertenwebpack.config.js
.Zusammenführen der alias mit Standard-webpack config
...
Zusammenführen der alias mit Standard-webpack config
...
Definieren
baseUrl
&paths
imtsconfig.json
wie folgt:cli-Pakete:
globalen Pakete:
lokale Pakete:
./test-config/webpack.test.js
) sollte ebenfalls aktualisiert werden.Hallo Maverick09 Antwort ist genial, aber es funktionierte nicht für mich, ich bin mit dieser Konfiguration:
cli-Pakete:
lokale Pakete:
System:
Standard configuraion hat zwei Teile, dev und prod also, wenn Sie ändern die benutzerdefinierte config wie dies scheint, jedes Ding arbeiten
In den letzten Versionen von Ionischen, alias funktioniert nicht, es sei denn, Sie verwenden Sie diese beheben (lassen Typoskript loader wissen, der alias):
tsconfig.json
credit: https://github.com/ionic-team/ionic-app-scripts/pull/683#issuecomment-294078919
Meine Ionischen info:
globalen Pakete:
lokale Pakete:
System: