Skip to main content
2 de 2
etiquetas editadas
Alfabravo
  • 9.9k
  • 5
  • 24
  • 32

Configuración de Webpack para que no genere tantos scripts?

Cordial saludo compañeros, de ante mano agradecerles por su ayuda.

Estoy implementando webpack para mejorar la minificacion, y veo que webpack me agrega en la salida de cada página, toda la cadena de script de todas las páginas que no estoy consumiendo ya que tengo rutas creadas en mi backend, eso a la larga va a generar que el código sea mas pesado.

Estoy usando de backend NodeJS, cabe resaltar que webpack funciona, y que por cada entry he creado un archivo js.

pregunta: ¿cómo lo puedo configurar para que no agregue toda la cadena?

Esta es la configuración webpack.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtracPluging = require('mini-css-extract-plugin');

const devMode = process.env.NODE_ENV !== 'production';

module.exports = {

    entry: {
        // services index - servicios de entrada a webpack
        index: './frontend/services/index.js',

        // PARTIALS
        partials: './frontend/services/partials/navigation.js',

        // NAVEGACION
        desprogramacion: './frontend/services/navegacion/desprogramacion.js',
        finanzas: './frontend/services/navegacion/finanzas.js',
        fit: './frontend/services/navegacion/fit.js',
        ninos: './frontend/services/navegacion/ninos.js',
        registro: './frontend/services/navegacion/registro.js',                 
    },

    output: {
        path: path.join(__dirname, 'backend/public'),
        filename: 'js/[name].js'
    },

    mode: 'development',

    module: {
        rules: [
            {
                test: /\.css/,
                use: [
                    devMode ? 'style-loader' : MiniCssExtracPluging.loader,
                    'css-loader'
                ]
            },
            {
                test: /\.hbs/,
                loader: "handlebars-loader"
            }
        ],

    },
    plugins: [
        // SALIDAS HBS - SECCION INDEX
        new HtmlWebpackPlugin({
            template: './frontend/views/index.hbs',
            filename: 'views/index.hbs',
            minify: {
                collapseWhitespace: true,
                removeComments: true,
                removeEmptyAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                useShortDoctype: true,
            },
        }),
        // SALIDAS HBS - CARPETA LAYOUTS
        new HtmlWebpackPlugin({
            template: './frontend/views/partials/navigation.hbs',
            filename: 'views/partials/navigation.hbs',
            minify: {
                collapseWhitespace: true,
                removeComments: true,
                removeEmptyAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                useShortDoctype: true,
            },
        }),        
        
        // SALIDAS - CARPETA NAVEGACION
        // navegacion desprogramacion
        new HtmlWebpackPlugin({
            template: './frontend/views/navegacion/desprogramacion.hbs',
            filename: 'views/navegacion/desprogramacion.hbs',
            minify: {
                collapseWhitespace: true,
                removeComments: true,
                removeEmptyAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                useShortDoctype: true,
            },
        }),

        // navegacion finanzas
        new HtmlWebpackPlugin({
            template: './frontend/views/navegacion/finanzas.hbs',
            filename: 'views/navegacion/finanzas.hbs',
            minify: {
                collapseWhitespace: true,
                removeComments: true,
                removeEmptyAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                useShortDoctype: true,
            },
        }),
        // navegacion fit
        new HtmlWebpackPlugin({
            template: './frontend/views/navegacion/fit.hbs',
            filename: 'views/navegacion/fit.hbs',
            minify: {
                collapseWhitespace: true,
                removeComments: true,
                removeEmptyAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                useShortDoctype: true,
            },
        }),
        // navegacion ninos
        new HtmlWebpackPlugin({
            template: './frontend/views/navegacion/ninos.hbs',
            filename: 'views/navegacion/ninos.hbs',
            minify: {
                collapseWhitespace: true,
                removeComments: true,
                removeEmptyAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                useShortDoctype: true,
            },
        }),
        // navegacion registro
        new HtmlWebpackPlugin({
            template: './frontend/views/navegacion/registro.hbs',
            filename: 'views/navegacion/registro.hbs',
            minify: {
                collapseWhitespace: true,
                removeComments: true,
                removeEmptyAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                useShortDoctype: true,
            },
        }),
        
        new MiniCssExtracPluging({
            filename: 'css/bundle.css'
        })
    ]
};

y al pasarle el npm run build me agrega todos los scripts, lo resumí para no poner todo el código de todas las paginas que tengo; pero si sumo todo, agrega mucho código y ya no encuentro ganancia de comprimir el código.

 <script src="../js/index.js"></script>
    <script src="../js/partials.js"></script>
    <script src="../js/desprogramacion.js"></script>
    <script src="../js/finanzas.js"></script>
    <script src="../js/fit.js"></script>
    <script src="../js/ninos.js"></script>
    <script src="../js/registro.js"></script>

Nuevamente muchas gracias por toda su ayuda.