明白なベンダーのチャンクの安定したモジュールIDを維持することに問題があります。ここで(SurviveJSをモデルにした)私の設定です:WebpackのCommonsChunkPluginを複数のエントリポイントで正しく使用する方法は?
const gitrev = require('git-rev-sync');
const path = require('path');
const webpack = require('webpack');
const ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');
const packageJson = require('./package.json');
const gulpPaths = require('./gulp/lib/gulp_paths');
module.exports = {
context: __dirname,
entry: {
vendor: Object.keys(packageJson.dependencies),
web: path.join(
__dirname,
gulpPaths.SCRIPT_SOURCE_DIR,
gulpPaths.SCRIPT_BUNDLE_SOURCE_FILE
),
// server: path.join(
// __dirname,
// gulpPaths.SCRIPT_SOURCE_DIR,
// gulpPaths.SCRIPT_SERVER_SIDE_SOURCE_FILE
// ),
},
output: {
path: path.join(__dirname, gulpPaths.SCRIPT_OUTPUT_DIR),
filename: '[name]_bundle.js',
},
plugins: [
new webpack.DefinePlugin({
__DEV__: false,
__TEST__: false,
__COMMIT__: JSON.stringify(gitrev.long()),
'process.env': {
NODE_ENV: JSON.stringify('production'),
},
}),
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest'],
minChunks: Infinity,
}),
new webpack.optimize.UglifyJsPlugin(),
],
resolve: {
extensions: ['', '.js', '.jsx'],
},
module: {
loaders: [
{
test: /\.jsx?$/,
loaders: ['babel'],
exclude: /node_modules/,
},
{ // Turn off AMD module loading on eventemitter2
test: /eventemitter2/,
loader: 'imports?define=>false',
}
]
},
};
それはかなりうまく動作します。私は私のリポジトリの履歴を通して前後に乗ることができ、ベンダのライブラリが実際にnode_modules
に変更された場合にのみ、ベンダのチャンクは変更されます。ただし、追加のエントリポイントのコメントを解除すると、すべてが変更されます。ベンダーのチャンクは、ベンダーのライブラリに変更を加えることなく変更されます。手動で数個のライブラリのみをホワイトリストに登録すると、問題は完全には解決されませんが、役立ちます。 DedupePluginとOccurenceOrderPluginと同じ方法で競合するようです。
また、Webpackドキュメント(recordsPath
とChunkManifestPlugin、運がない)に記載されているアプローチを使用しようとしました。
サーバーのエントリポイントはサーバー側のレンダリングで失敗した実験であり、おそらく削除する必要があるため、これ以上の問題はありません。しかし、すぐに私は、とにかく、ページローディング時間のより詳細なチューニングのために、複数のエントリーポイントを持つつもりです。おそらく面白くなるでしょう。
[NamedModulesPlugin](https://github.com/webpack/webpack/blob/webpack-1 /lib/NamedModulesPlugin.js)を参照してください。モジュールのインデックス作成に関連する場合は、これで修正されます。バンドルはもう少し大きくなりますが、それは問題ではありません。 –