webpack、特にコードの分割とチャンキングがわかりません。そして、私はフロントエンド開発に不慣れです。
大規模なマルチページ AngularJS アプリがあり、一部のページ (すべてではない) が、多くの AMD モジュールで構成される大規模なベンダー ライブラリの一部をすべて個別のファイルで使用しているとします。そのため、ページごとに 1 つずつ、複数のエントリ ポイントを構成しています。次のバンドルを作成するのが妥当と思われます。
- 私のアプリのコードを含む各ページのバンドル、および場合によっては css など
- ベンダーの AMD モジュール (少なくとも、私のページで使用されているすべてのモジュール) を含むバンドル
- 複数のアプリ ページで使用される一般的なライブラリ (Angular、jquery、moment など) のバンドル。
そこで、次の Web ページ構成を作成します。
//Webpack config.
var path = require('path');
var CommonsChunkPlugin = new require("webpack/lib/optimize/CommonsChunkPlugin");
var glob = require('glob');
module.exports = {
context: path.resolve(__dirname, 'app'),
entry: {
page1Entry: './page1Entry.js',
page2Entry: './page2Entry.js', //There are a few more of these
vendor: glob.sync("../vendor/**/*.js")
},
output: {
filename: '[name].bundle.js',
chunkFilename: "[id].chunk.js"
},
resolve: {
//Resolve non-relative path declared dependencies from the following directories.
//This means look in the context root (/app) for my app code.
//look in vendor folder for the vendor requires
//everything else look in node_modules
modulesDirectories: ['vendor', 'app', 'node_modules'],
},
plugins: [
new CommonsChunkPlugin({minChunks: 2, name: "commons"}),
new CommonsChunkPlugin({name: "vendor", chunks: ['vendor']}),
]
}
これは、望ましい結果を生み出していません。私が得るものは次のようなものです：
- page1Entry.bundle.js //アプリ コードといくつかのベンダー ライブラリを含む
- page2Entry.bundle.js //アプリコードのみを含む
- vendor.bundle.js //ほぼ完全に空
- commons.bundle.js //ほぼ正しいようで、角度などがありますいくつかの番号付きチャンクが作成されます。
- 4.chunk.js //小さく、2 つのページで使用されるアプリ ロジックの一部が含まれています。ベンダー ライブラリはありません -- なぜこれが作成されたのですか?
- 6.chunk.js //巨大で、アプリ ロジックとベンダー ライブラリの一部が含まれています。なぜですか?
また、デプロイされたコードがサーバーから番号付きのチャンクを取得しようとしていることがわかりますが、すべてのチャンクがデプロイされている /deploymentcontext/js フォルダーからそれらを取得していません - ページ URL (例: http ://my.domain/my/page/4.chunk.js )。これを構成するために output.publicPath を使用する場合、展開コンテキストをハードコーディングする必要があります。どうすればこれを修正できますか?
私は何を間違っていますか？