JavaScriptTweetAngular2を書いてて、各コンポーネントごとにmain.tsを作って、tscして、さらにwebpackでbundle.jsを作りたくて、うまくいかなかったけど、最近やっと上手くいったので、個人用にメモしておきます。僕はAngular2を使うにあたってTypeScriptで書いていて、webpackを使っています。tsconfig.jsonのfilesの部分をgulpのプラグインを使って更新をしています。準備webpackのインストールgulpのインストールgulp-tsconfig-updateのインストールで多分いける。gulp-tsconfig-updateは@laco0416さんが作られたgulpのプラグインで、tsconfig.jsonのfilesの部分をgulpで更新できるので、今回すごく助かりました。記事は、Qiitaの記事で書かれているので、参考にしていただければと思います。to準備に必要なものはインストールされた前提で話を進めます。gulpfile.jsを作成し以下のコードを書きます。これで、いちいちコンポーネントを作っては、tsconfig.jsonのfilesにファイルパスを書かなくて済みます。gulpコマンドを実行gulpを実行すると、先ほど書いたgulpのタスクが走って、tsconfig.jsonが出力されます。出力された内容はこんな感じ。]}ちなみに、files以外のオプションは自分で書いています。最初、オプションのrootDirを設定していなくて、tscでビルドされた際にコンポーネントのフォルダ構造が保たれないまま、ビルドされていたので、rootDirを設定するのが肝です。outDirはビルドしたファイルをどこに出力するかを変更できるので、今回は"build"を指定しています。オプションの一覧は、この記事とか読んでみると良いかもです。webpack.config.jsを編集するwebpack.config.jsは以下のように編集しました。オブジェクトでエントリポイントを指定しています。entriesのvalueに、エントリーポイントのパスを入れています。entriesのキーを["component-a/bundle"]のように指定してしているのは、webpackがフォルダ構造を考えてよしなにやってくれるからです。エントリーポイントの指定の仕方は他にもあるので調べてみてください。.webpackこれで、build配下に各コンポーネントのディレクトリが作成され、各コンポーネントのディレクトリには、ビルドされたjsファイルとbundle.jsが出力されたかと思います。最後にAngular2で各コンポーネントごとにエントリーポイント作ってビルドしたりするのが正しいのかはよくわからないですが、この記事が同じようなことで詰まってる人の役に立てれば幸いです。はてなブログPro1991年生まれ。大阪でWebエンジニアをしています。webpackで書きたい月別アーカイブ検索はてなブログをはじめよう!ryskitさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。