webentwicklung-frage-antwort-db.com.de

Webpack 4 Migration CommonsChunkPlugin

Ich benötige Hilfe bei der Migration des folgenden Codes von Webpack 3 nach 4.

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

Ich habe zwei Eintragsdateien und möchte, dass nur die Abhängigkeiten der ersten im Vendor Chunk enthalten sind. Die Abhängigkeiten des zweiten Eintrags sollten alle in einem eigenen Bundle bleiben.

35
Erik Bender

Ich habe zwei Eintragsdateien und möchte, dass nur die Abhängigkeiten der ersten im Vendor Chunk enthalten sind. Die Abhängigkeiten des zweiten Eintrags sollten alle in einem eigenen Bundle bleiben.

Angenommen, Ihre Eintrittspunkte sind main und secondary:

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

Verwenden von webpack-4 Sie können nur die vendors Module aus dem main Chunk extrahieren, aber die in secondary referenzierten Module von Drittanbietern mit dem in diesem Chunk belassen test Funktion des zu erstellenden cacheGroups.

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

Es dauerte eine Weile, bis ich herausgefunden hatte, dass das Argument chunks in Webpack 4 jetzt eine Funktion enthält, mit der Sie nur einen bestimmten Eintrag einfügen können. Ich gehe davon aus, dass dies eine kürzliche Änderung ist, da sie zum Zeitpunkt der Veröffentlichung nicht in der offiziellen Dokumentation enthalten war.

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.