web-dev-qa-db-fra.com

Webpack 4 migration CommonsChunkPlugin

J'ai besoin d'aide pour migrer le code suivant de Webpack 3 à 4.

new webpack.optimize.CommonsChunkPlugin({
    minChunks: module => module.context && module.context.indexOf("node_modules") !== -1,
    name: "vendor",
    chunks: ["main"]
})

J'ai deux fichiers d'entrée et je souhaite que seules les dépendances du premier soient incluses dans le bloc fournisseur. Les dépendances de la deuxième entrée doivent toutes rester dans son propre paquet.

javascriptwebpackwebpack-3commonschunkpluginwebpack-4
35
Erik Bender

J'ai deux fichiers d'entrée et je souhaite que seules les dépendances du premier soient incluses dans le bloc fournisseur. Les dépendances de la deuxième entrée doivent toutes rester dans son propre paquet.

En supposant que vos points d'entrée sont main et secondary:

entry: {
    main: 'path-to/main.js',
    secondary: 'path-to/secondary.js'
}

Utilisation de webpack-4 Vous pouvez extraire uniquement les modules vendors de la portion main, tout en laissant les modules tiers référencés dans secondary à l'intérieur de cette portion à l'aide de la fonction test du cacheGroups que vous souhaitez créer.

optimization: {
    splitChunks: {
        cacheGroups: {
            vendors: {
                name: 'vendors',
                chunks: 'all',
                reuseExistingChunk: true,
                priority: 1,
                enforce: true,
                test(module, chunks) {
                    const name = module.nameForCondition && module.nameForCondition();
                    return chunks.some(chunk => {
                        return chunk.name === 'main' && /[\\/]node_modules[\\/]/.test(name);
                    });
                }
            },
            secondary: {
                name: 'secondary',
                chunks: 'all',
                priority: 2,
                enforce: true,
                test(module, chunks) {
                    return chunks.some(chunk => chunk.name === 'secondary');
                }
            }
        }
    }
}
5
Carloluis

Cela m'a pris un certain temps à comprendre, mais la réalisation clé pour moi a été que l'argument chunks de Webpack 4 prend maintenant une fonction, ce qui vous permet d'inclure uniquement une entrée spécifique. Je suppose que c'est un changement récent, car au moment de publier cela ne figurait pas dans la documentation officielle.

splitChunks: {
  cacheGroups: {
    vendor: {
      name: 'vendor',
      chunks: chunk => chunk.name == 'main',
      reuseExistingChunk: true,
      priority: 1,
      test: module =>
        /[\\/]node_modules[\\/]/.test(module.context),
      minChunks: 1,
      minSize: 0,
    },
  },
},
2
Nick B.