Webpack 4 - créer un chunk vendeur

Question

Dans une configuration webpack 3, j'utiliserais le code ci-dessous pour créer des fichiers vendor.js chunk :

entry: {
    client: ['./client.js'],
    vendor: ['babel-polyfill', 'react', 'react-dom', 'redux'],
},

output: {
  filename: '[name].[chunkhash].bundle.js',
  path: '../dist',
  chunkFilename: '[name].[chunkhash].bundle.js',
  publicPath: '/',
},

plugins: [
    new webpack.HashedModuleIdsPlugin(),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'runtime',
    }),
],

Avec tous les changements, je ne suis pas sûr de pouvoir le faire avec Webpack 4. Je sais que CommonChunksPlugin a été supprimé, il y a donc une autre façon d'y parvenir. J'ai également lu ce tutoriel mais je ne suis toujours pas sûr de l'extraction du chunk de l'exécution et de la définition appropriée output propriété.

EDIT : Malheureusement, j'ai eu des problèmes avec la réponse la plus populaire ici. Vérifiez ma réponse .

Answer 1

Afin de réduire la taille du paquet de js du fournisseur. Nous pouvons diviser les paquets du module node en différents fichiers bundle. Je me suis référé à ce blog pour diviser le volumineux fichier vendeur généré par webpack. Gist de ce lien que j'ai utilisé initialement :

optimization: {
  runtimeChunk: 'single',
  splitChunks: {
    chunks: 'all',
    maxInitialRequests: Infinity,
    minSize: 0,
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name(module) {
          // get the name. E.g. node_modules/packageName/not/this/part.js
          // or node_modules/packageName
          const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

          // npm package names are URL-safe, but some servers don't like @ symbols
          return `npm.${packageName.replace('@', '')}`;
        },
      },
    },
  },
}

Si l'on veut regrouper plusieurs paquets et les répartir en différents paquets, il faut se référer à la liste suivante.

optimization: {
  runtimeChunk: 'single',
  splitChunks: {
    chunks: 'all',
    maxInitialRequests: Infinity,
    minSize: 0,
    cacheGroups: {
      reactVendor: {
        test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
        name: "reactvendor"
      },
      utilityVendor: {
        test: /[\\/]node_modules[\\/](lodash|moment|moment-timezone)[\\/]/,
        name: "utilityVendor"
      },
      bootstrapVendor: {
        test: /[\\/]node_modules[\\/](react-bootstrap)[\\/]/,
        name: "bootstrapVendor"
      },
      vendor: {
        test: /[\\/]node_modules[\\/](!react-bootstrap)(!lodash)(!moment)(!moment-timezone)[\\/]/,
        name: "vendor"
      },
    },
  },
}

Answer 2

Vous trouverez quelques exemples ici : https://github.com/webpack/webpack/tree/master/examples

Sur la base de votre exemple, je crois que cela se traduit par :

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

Answer 3

Afin de séparer les vendeurs et le temps de fonctionnement vous devez utiliser le optimization option.

Configuration possible de Webpack 4 :

// mode: 'development' | 'production' | 'none'

entry: {
    client: ['./client.js'],
    vendor: ['babel-polyfill', 'react', 'react-dom', 'redux'],
},

output: {
    filename: '[name].[chunkhash].bundle.js',
    path: '../dist',
    chunkFilename: '[name].[chunkhash].bundle.js',
    publicPath: '/',
},

optimization: {
    runtimeChunk: 'single',
    splitChunks: {
        cacheGroups: {
            vendor: {
                test: /[\\/]node_modules[\\/]/,
                name: 'vendors',
                enforce: true,
                chunks: 'all'
            }
        }
    }
}

Vous trouverez plus d'informations sur le W4 dans ce document. Webpack-Demo .

Vous pouvez également obtenir le même résultat en changeant le optimization.splitChunks.chunks à la propriété "all" . Lire la suite ici

Note : Vous pouvez le configurer via optimization.splitChunks . Les exemples parlent de chunks, par défaut cela ne fonctionne que pour les chunks asynchrones, mais avec optimization.splitChunks.chunks: "all" il en serait de même pour les morceaux initiaux.

Answer 4

Vous pourriez supprimer le vendeur de la propriété d'entrée et définir la propriété d'optimisation comme suit...

entry: {
 client: './client.js'
},

output: {
 path: path.join(__dirname, '../dist'),
 filename: '[name].chunkhash.bundle.js',
 chunkFilename: '[name].chunkhash.bundle.js',
 publicPath: '/',
},

optimization: {
  splitChunks: {
   cacheGroups: {
    vendor: {
     test: /node_modules/,
     chunks: 'initial',
     name: 'vendor',
     enforce: true
    },
   }
  } 
 }

Vérifiez cette source exemples de webpack

Answer 5

Après un certain temps, j'ai découvert que cette configuration :

entry: {
  vendor: ['@babel/polyfill', 'react', 'react-dom', 'redux'],
  client: './client.js',
},
optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {
        chunks: 'initial',
        name: 'vendor',
        test: 'vendor',
        enforce: true
      },
    }
  },
  runtimeChunk: true
}

n'arrivait pas à charger @babel/polyfill qui provoquait des erreurs d'incompatibilité de navigateur... Récemment, j'ai donc levé les yeux vers le mise à jour de la documentation de webpack et a trouvé un moyen pour créer un morceau de vendeur explicite qui chargeait correctement @babel/polyfill :

const moduleList = ["@babel/polyfill", "react", "react-dom"];
...

  entry: {
    client: ["@babel/polyfill", "../src/client.js"]
  }
  optimization: {
    runtimeChunk: "single",
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: new RegExp(
            `[\\/]node_modules[\\/](${moduleList.join("|")})[\\/]`
          ),
          chunks: "initial",
          name: "vendors",
          enforce: true
        }
      }
    }
  }

Remarquez que je crée un entrée avec tous du code inclus et puis Je précise avec splitChunks.cacheGroups.vendor.test quels modules doivent être répartis entre les vendeur chunk.

• Documentation de Webpack sur SplitChunksPlugin .
• Guide de Webpack sur mise en cache
• Auteur de Webpack réponse sur le même problème

Cependant, je ne suis pas sûr que ce soit 100% correct ou que cela puisse être amélioré car c'est littéralement l'une des choses les plus confuses qui soient. Cependant, cette méthode semble être la plus proche de la documentation et semble produire des morceaux corrects lorsque je les inspecte avec la commande webpack-bundle-analyzer (ne met à jour que les morceaux qui ont été modifiés et le reste reste reste le même d'une version à l'autre) et corrige le problème avec le fichier polyfill .