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.