2

CommonsChunkplugin を使用してコードを分割していました。現在、プロジェクトを webpack 4 に移行しようとしています。

古い設定コードは次のとおりです。

entry: {
        main: './src/app.js',
        vendor: ['babel-polyfill','react','react-dom',"jquery","bootstrap"]
},

new webpack.HashedModuleIdsPlugin({
            // Options...
}),
new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor'
}),
new webpack.optimize.CommonsChunkPlugin({
            name: 'manifest'
})

そして、これがwebpack 4構成コードです:

entry: {
        main: './src/app.js'
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                default: false,
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendor",
                    chunks: "initial"
                }
            }
        }
    },

新しい構成コードは、プロジェクトで使用されるノード モジュールからすべてのコードを取得します。しかし、ベンダー ライブラリ (エントリー構成部分で定義したもの) のみを分割したいと考えています。node_modules のすべてのコードではありません。

この場合: 'babel-polyfill','react','react-dom',"jquery","bootstrap"

entry: {
        main: './src/app.js',
        vendor: ['babel-polyfill','react','react-dom',"jquery","bootstrap"]
},

そして私の他の質問：

2) HashedModuleIdsPlugin はもう必要ですか?

3) ランタイム コードを分割する必要がありますか?

4

2 に答える 2

2

私は実際に非常によく似た質問をしました。

必要なパッケージのみのベンダー バンドルを作成する方法は次のとおりです。

// mode: "development || "production",
entry: {
  vendor: ['babel-polyfill', 'react', 'react-dom', 'redux'],
  main: './client.js',
},
output: {
  path: path.join(__dirname, '../dist'),
  filename: '[name].[chunkhash:8].bundle.js',
  chunkFilename: '[name].[chunkhash:8].bundle.js',
  publicPath: '/',
},
optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {
        chunks: 'initial',
        name: 'vendor',
        test: 'vendor',
        enforce: true
      },
    }
  },
  runtimeChunk: true
}

HashedModuleIdsPluginランタイム チャンクが自動的に生成される必要はありません。

于 2018-04-09T16:07:52.063 に答える