Comment utiliser Webpack 4 SplitChunksPlugin avec HtmlWebpackPlugin pour L'Application de plusieurs pages?

j'essaie d'utiliser le SplitChunksPlugin pour produire des paquets séparés par page/modèle dans une MPA. Quand j'utilise le HtmlWebpackPlugin, je reçois un fichier html pour chaque page avec une balise script pointant vers le bon paquet. C'est génial! Cependant, le problème que j'ai est avec mes fichiers fournisseurs. Je veux des fichiers html à le vendeur faisceaux dont ils ont besoin. Je ne peux pas obtenir chaque fichier html séparé pour pointer vers les paquets de fournisseur corrects quand le SplitChunksPlugin crée plusieurs fournisseur de lots. Les bottes sont produites:

home.bundle.js
product.bundle.js
cart.bundle.js
vendors~cart~home~product.bundle.js
vendors~cart~product.bundle.js

donc, en gros, le modèle de page d'accueil devrait faire référence à la page d'accueil.bundle.js, vendeurs~cart~accueil~produit.bundle.js, et pas le deuxième fournisseur. Seuls les modèles de chariot et de produit devraient faire référence aux deux ensembles de fournisseurs. J'utilise l'option chunks pour le HtmlWebpackPlugin mais je ne peux pas l'obtenir pour tirer les paquets du fournisseur correct à moins que je fasse explicitement référence au nom de celui-ci comme ceci:

chunks: ['vendors~cart~home~product.bundle','home']

Mais ce genre de défaites le but du rendu dynamique de vos balises de script. J'ai essayé de créer un point d'entrée pour les fournisseurs, mais ça met tous mes fournisseurs dans le même sac. Y a-t-il une configuration que je ne vois pas?

mon webpack.config.js:

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const Visualizer = require('webpack-visualizer-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    devtool: 'cheap-module-eval-source-map',
    entry: {
        home: './src/js/page-types/home.js',
        product: './src/js/page-types/product.js',
        cart: './src/js/page-types/cart.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist/js')
    },
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new Visualizer(),
        new HtmlWebpackPlugin({
            filename: 'home.html',
            chunks: ['vendors','home']
        }),
        new HtmlWebpackPlugin({
            filename: 'product.html',
            chunks: ['vendors','product']
        }),
        new HtmlWebpackPlugin({
            filename: 'cart.html',
            chunks: ['vendors~cart~product','cart']
        }),
    ], ...

mes modules js:

/* home.js */
    import jQuery from 'jquery';
    import 'bootstrap';

panier et produit également référence à la réagir la bibliothèque:

/* cart.js */
    import jQuery from 'jquery';
    import 'bootstrap';
    import React from 'react';
    import ReactDOM from 'react-dom';


/* product.js */
    import jQuery from 'jquery';
    import 'bootstrap';
    import React from 'react';
    import ReactDOM from 'react-dom';

exemple html output home.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
  <script type="text/javascript" src="home.bundle.js"></script></body>
</html>
14
demandé sur user1121622 2018-06-11 20:35:35

1 réponses

Une option est de créer manuellement votre fournisseur morceaux, puis les inclure celui de ces morceaux nécessaires pour une page dans le chunks option de HtmlWebpackPlugin.

webpack.config.js:

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const Visualizer = require('webpack-visualizer-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    devtool: 'cheap-module-eval-source-map',
    entry: {
        home: './src/js/page-types/home.js',
        product: './src/js/page-types/product.js',
        cart: './src/js/page-types/cart.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist/js')
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                'vendor-bootstrap': {
                    name: 'vendor-bootstrap',
                    test: /[\/]node_modules[\/](jquery|bootstrap)[\/]/,
                    chunks: 'initial',
                    priority: 2
                },
                'vendor-react': {
                    name: 'vendor-react',
                    test: /[\/]node_modules[\/]react.*?[\/]/,
                    chunks: 'initial',
                    priority: 2
                },
                'vendor-all': {
                    name: 'vendor-all',
                    test: /[\/]node_modules[\/]/,
                    chunks: 'initial',
                    priority: 1
                },
            }
        }
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new Visualizer(),
        new HtmlWebpackPlugin({
            filename: 'home.html',
            chunks: ['vendor-bootstrap', 'vendor-all', 'home']
        }),
        new HtmlWebpackPlugin({
            filename: 'product.html',
            chunks: ['vendor-bootstrap', 'vendor-react', 'vendor-all', 'product']
        }),
        new HtmlWebpackPlugin({
            filename: 'cart.html',
            chunks: ['vendor-bootstrap', 'vendor-react', 'vendor-all', 'cart']
        }),
    ], ...

vendor-all chunk est pour attraper toutes les autres bibliothèques de vendeur qui ne sont pas incluses dans les autres morceaux.

1
répondu Derek 2018-08-30 13:25:56