私は、論理的に2つの部分に分けられたプロジェクトを持っています。Angular2とWebpackのモジュール構造
私の構造があります:
- は
- 不正なサービス
- app.component.ts
- vendor.ts
- boot.ts
を許可app.co mponent:
@Component({
selector : "body",
template : `<router-outlet></router-outlet>`,
directives: [ROUTER_DIRECTIVES],
providers : [AuthService, DefaultService, LoggerService]
})
@Routes([
{
path : "/auth/login",
component: AuthComponent
},
{
path : "/",
component: DefaultComponent
}
])
export class AppComponent {}
私は、権限のない権限のあるモジュールを分離してカプセル化したいと思っています。 ディレクトリサービスは両方のモジュールで共通です(ログなど) Webpackを使用しました。
Webpackが別のモジュールをロードする必要があると知ったように、app.componentをどのようにリメイクするのですか?
entry: {
"vendors": "./project/app/vendors.ts",
"auth" : "./project/app/unauthorized/auth.component.ts",
"unauth" : "./project/app/authorized/default.component.ts",
"style" : "./project/sass/application.scss"
}
プラグイン::webpack.config.jsから
ビルド後
new CommonsPlugin({
minChunks: Infinity,
name : "common",
chunks : [
"vendors",
"auth",
"unauth"
]
})
私は4つのファイルを持っている:
- auth.js
- unauth.js
- vendors.js
- common.js
共通するのは、唯一、ベンダーが持つデフォルトのWebPACKの構造を有していますすべてのベンダーがコードします。 しかし、auth.jsとunauth.jsにはtheireコードだけでなく、vendors2.jsにあるangle2構造のほとんどすべてがあります。
Webpackが他のファイルを読み込めないことは確かですか? – Illorian