問題タブ [splitchunksplugin]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
webpack - Webpack 4 SplitChunksPlugin - 動的インポートの一般的な依存関係
ドキュメントに従って、Webpackで動的インポートを使用しています: https://webpack.js.org/guides/code-splitting/#dynamic-imports
非常に基本的な例 (実際のコードではありません):
// main.js
// moduleA.js
// moduleB.js
問題は、ユーティリティモジュールが moduleA と moduleB の両方のチャンクに含まれているため、重複していることです。標準インポートの場合のように、これらのタイプの依存関係を個別の共通チャンクに分割するよう Webpack を取得する方法が見つかりません。SplitChunksPlugin は、動的にインポートされるため、moduleAとmoduleBの間の共通の依存関係をバンドルしていないようです。何かアイデアはありますか？
css - MiniCssExtractPlugin + SplitChunksPlugin はスコープ付き CSS をバンドルに入れません
私は Webpack 4 セットアップを使用しています。ここでは、.vue ファイルからのスコープ css を含め、すべての css を 1 つのバンドルにまとめようとしています。MiniCssExtractPlugin を使用してファイルから CSS を抽出し、SplitChunksPlugin を使用してすべての CSS を 1 つのファイルにバンドルしています。問題は、.vue ファイルからのスコープ css が別の css ファイルに入れられていることです。
私のwebpack構成:
出力：