2

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.

1 respuesta 1

2

Muchas gracias, respondo a mi pregunta para dejar soporte que le pueda ayudar a alguien mas,

la sintaxis correcta para agregar varias entradas bajo un mismo script es usando import: ['pagina1','pagina2'....], información validada de la pagina oficial de web pack.

entry: {
        app: {
            import: [// services index - servicios de entrada a webpack
                './frontend/services/index.js',
                // PARTIALS
                './frontend/services/partials/navigation.js',
                // NAVEGACION
                './frontend/services/navegacion/desprogramacion.js',
                './frontend/services/navegacion/finanzas.js',
                './frontend/services/navegacion/fit.js',
                './frontend/services/navegacion/ninos.js',
                './frontend/services/navegacion/registro.js',                
            ]
        }
    },

como resultado obtenemos solo un script en toda nuestra web.

<script src="../js/app.js"></script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.