2016-08-16 8 views
1

明白なベンダーのチャンクの安定したモジュール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、運がない)に記載されているアプローチを使用しようとしました。

サーバーのエントリポイントはサーバー側のレンダリングで失敗した実験であり、おそらく削除する必要があるため、これ以上の問題はありません。しかし、すぐに私は、とにかく、ページローディング時間のより詳細なチューニングのために、複数のエントリーポイントを持つつもりです。おそらく面白くなるでしょう。

+1

[NamedModulesPlugin](https://github.com/webpack/webpack/blob/webpack-1 /lib/NamedModulesPlugin.js)を参照してください。モジュールのインデックス作成に関連する場合は、これで修正されます。バンドルはもう少し大きくなりますが、それは問題ではありません。 –

答えて

0

JuhoVepsäläinenさんからお伝えしたように、私にとって最良の選択肢はNamedModulesPluginです。記録のために、HashModuleIdsプラグインも見てみる価値はありますが、Webpack 2でしか利用できません。

関連する問題