webpackを複数のファイルに構築する

Question

私はWebパックアプリケーションを持っており、複数のファイルを単一のjavascriptファイルではなくビルドしたいと考えています。例えば私がそのようなフォルダ構造を持っている場合

components 
1.js 
2.js 
actions 
1.js. 
2.js 

私のwebpackビルドは同じフォルダ構造のファイルをコンパイルする必要があります。どのようにそれを達成することができますか？

私はバベルのCLIを試してみました：

babel ./src --out-dir ./lib --source-maps --presets es2015,react --plugins babel-plugin-add-module-exports,babel-plugin-transform-decorators-legacy,babel-plugin-transform-class-properties --watch 

私が望んでいたが、それはWebPACKのの解決については何も知らないので、エラー

を得ることがモジュール

を解決できませんとしてそれは、ファイルを出力します。

提案がありますか？

Answer 1

複数のファイルを出力するようにWebpackを取得することは可能ですが、制限があります。まず、これがどのように機能するかを理解することが重要です。 Webpackは実際には、必要に応じてコード「チャンク」を読み込むことができるランタイムスクリプトを提供しています。これは大規模アプリケーションにとって重要なので、ユーザーはホームページを見るだけでアプリケーション全体のJavaScriptをダウンロードする必要はありません。しかしwebpackは、これらのチャンクと、実行時にそれらを正しくロードできるようにビルド時に名前が付けられているものを追跡する必要があります。そのため、この機能を有効にするのには、独自のファイル命名規則があります。詳細はこちらhttps://webpack.github.io/docs/code-splitting.htmlをご覧ください。したがって、あなたはすべてのデープをrequire.ensureすることができますが、webpackのランタイムはそのような場合にそれらを見つけることができないので、彼らはあなたが記述したように名前は付けられません。

もう一つ重要な点は、webpackはバンドラなので、ファイルをバンドルすることです。基本的には、ファイルをバンドルしたくないと言っています。その場合、おそらくrequire.jsを使用して調べるべきです。多くの人々はWepbackやBrowserifyなどのバンドル業者に移行してきました。通常、ほとんどのモジュールを個別にダウンロードするのは効率的ではありません。しかし、すべてのアプリは異なっているので、実際にバンドルしないのがよい理由があるかもしれません。

実際にいくつかのバンドルを行いたいが、それがどのように行われているかを最適化したいのであれば、私もそれを手助けすることができ、webpackは確かにそのための素晴らしいツールです。しかし、私はあなたのユースケースを理解して、最善のアドバイスを与える必要があります。