Cómo funciona webpack.config.js

Clase 5 de 53 • Curso Profesional de Vue.js 2

Resumen

Aprende a configurar webpack con seguridad y criterio: desde el concepto de Module Bundler hasta el uso de loaders como vue-loader, babel-loader y file-loader, pasando por devServer, performance y source maps. Verás cómo pasar de un código pensado para el desarrollador a un bundle óptimo para el navegador, sin perder claridad ni mantenibilidad.

¿Qué es webpack y para qué sirve en el proyecto?

Trabaja como un Module Bundler que toma múltiples archivos locales y genera uno o varios bundles para producción. Esto permite desarrollar con módulos separados y entregar al browser un archivo optimizado.

Código para desarrollador vs. browser: modularidad cómoda para mantener, frente a compatibilidad del navegador.
Soporte más allá de JavaScript: incluye CSS, SVG, imágenes y URLs en el bundle.
Proceso intermedio necesario: transforma código moderno en algo que el browser entienda.

¿Cómo se estructura webpack.config.js y qué hace cada parte?

Corre sobre Node, por eso se usa el módulo nativo path, se referencia la librería webpack y se exporta la configuración con CommonJS mediante module.exports.

// webpack.config.js (fragmento ilustrativo)
const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: '.../archivo/de/entrada.js', // punto de entrada.
  output: {
    path: path.resolve(__dirname, 'dist'), // carpeta de salida.
    filename: 'build.js' // nombre del bundle final.
  },
  module: { rules: [
    { test: /\.vue$/, loader: 'vue-loader' },
    { test: /\.js$/, loader: 'babel-loader' },
    { test: /\.(png|jpe?g|gif|svg)$/, loader: 'file-loader' }
  ]}
};

¿Qué define entry y cómo funciona el tree shaking?

entry: archivo de entrada que inicia el build.
tree shaking: el bundle final incluye solo los módulos requeridos directa o indirectamente desde el entry.
Beneficio clave: configuras un único entry point y webpack construye todo el árbol de dependencias.

¿Cómo se configura output con path y filename?

output.path: con path.resolve apuntas a la carpeta dist en la raíz del proyecto.
output.filename: nombre del bundle, por ejemplo build.js.
Ventaja: controlas la ubicación y el nombre del artefacto final.

¿Qué resuelven las rules y los loaders?

Las rules definen transformaciones entre la entrada y la salida. Permiten ejecutar procesos intermedios como linteo, tests, compilación de estilos o transpilación de JavaScript.

vue-loader para archivos .vue.
Compila componentes .vue a JavaScript entendible por el navegador.
Integra loaders de estilos: vue-style-loader, css-loader y sass-loader.
Mismo patrón para CSS y SASS.
babel-loader para archivos .js.
Usa Babel como transpilador de ECMAScript moderno a código compatible con navegadores antiguos.
Permite despreocuparse de la compatibilidad si se configura correctamente.
file-loader para imágenes .png, .jpg, .gif, .svg.
Incluye activos estáticos dentro del bundle final.

¿Qué herramientas ofrece webpack para desarrollo y producción?

Además del build, puedes mejorar el flujo de trabajo con resolución de módulos, servidor de desarrollo y diagnósticos de rendimiento. También separar comportamientos entre desarrollo y producción.

resolve: indica a Vue.js qué archivos debe compilar.
devServer: servidor web basado en webpack para desarrollo.
Ajuste útil: noInfo: false para ver más información en consola.
performance: muestra pistas sobre posibles problemas de rendimiento, como tamaños de archivos.
devTool: genera un source map para depuración más fácil.
Condición de producción: si se compila para producción, se aplican optimizaciones.
Minificar el código y agilificarlo.
Generar un source map adecuado para entornos productivos.
En desarrollo, se mantiene una configuración más cómoda para debug.

Habilidades que refuerzas aquí: - Configurar un webpack.config.js entendiendo cada propiedad. - Aplicar loaders para componentes .vue, estilos CSS/SASS y activos estáticos. - Transpilar con Babel para compatibilidad multi-navegador. - Usar devServer para un ciclo de desarrollo fluido. - Ajustar performance y source maps según el entorno.

¿Tienes dudas o quieres compartir cómo organizas tus loaders y el build de producción? Deja tu comentario y conversemos sobre mejores prácticas.

Carlos Eduardo Gomez García

teacher•

Lo interesante es que Vue 3 ya no incluye el webpack.config.js, para añadir la configuración de WebPack en Vue 3 se debe crear un archivo llamado: vue.config.js con lo siguiente:

module.exports = {
	configureWebpack: {
		// Aquí la configuración de WebPack
	}
}

Aunque realmente la configuración base por defecto ya la tiene Vue internamente

Luciano Cavallo

student•

Buenísimo loco, gracias!

Juan C Felizzola

student•

Curso completo de Webpack:
https://platzi.com/clases/webpack/

Jafet López Chaves

student•

muy bien gracias!

Freddy Córdova Arana

student•

Muy recomendado, el profesor es Leonidas 😃

David Alejandro Abreu Abreu

student•

Con la versión Vue-CLI 3 el archivo webpack ya no es necesario según veo. Tampoco ningún tipo de configuración relacionado a webpack?

Juan Esteban Galvis

student•

Estuve buscando y encontré esta documentación de Vue sobre el tema: https://es.vuejs.org/v2/guide/installation.html#Runtime-Compilador-vs-Runtime

Matías Criado

student•

Exacto, con Vue-CLI 3 no es necesario porque Webpack corre por detrás.

Allen Kevin Zapien Zamora Zapien

student•

Chale si me está costando trabajo que este curso no esté actualizado, por que no me corresponde lo que instalé con lo que está en el curso, y no sé que funciona y que ya no, de haber sabido agarraba el curso básico, pero creí que este era más completo.

Vicente López Robles

student•

¿Para cuando el curso de Vue 3?, este ya quedó obsoleto :(

Alan Lapierre

student•

Ya hay disponible un curso con Vue 3...El que le sigue a este dentro de la carrera de Vue.

Vicente López Robles

student•

@alanpierre tienes razón, solo que no viene en el título, solo hasta que entras a ver el temario es que habla sobre la instalación del 3, gracias por el dato

Alexander Silvera

student•

Webpack también nos permite agregar archivos de CSS, archivos .svg, imágenes, urls y contenidos. Esto quiere decir que se puede compilar archivos de JavaScript y archivos estáticos

Freddy Córdova Arana

student•

Buen dato ☝

marcelo tito copa

student•

ya estamos en vue 3.11.0 para cuando actualizamos ....

Victor Ruiz

student•

Cuál es la diferencia entre webpack-simple y webpack cuando se usa vue-cli?

Juan Castro

teacher•

La complejidad de la configuración de Webpack.

Nicolas Gonzalez

student•

Hay varias diferencia…
*no solo la cantidad de **“herramientas” **que trae. Webpack obviamente trae mas (entre ellas esta vue router).
*Jerarquía de archivos (como y donde estas ubicados los archivos no solo de configuración si no los que vas a crear vos como desarollador).
***Complejidad **de la app a desarrollar (al principio de el curso mencionaron la complejidad inherente) Si necesitas navegación obviamente vas a utilizar webpack, y si ademas de navegación necesitas analytics por cada “pagina” vas a utilizar vuex.js.
*Básicamente esas son las diferencias si hay alguna mas que sumen su comentario

jonathan sanchez

student•

en la version de cli-vue 3, ya viene incluida la configuracion de webpack en uno de sus servicios:

Servicio CLI Este servicio es una dependencia para el desarrollo de proyectos con Vue JS, se despliega en cada proyecto que hayas creado con Vue Cli. El Servicio CLI está creado bajo Webpack y Webpack Dev Server

Federico Walovnik

student•

Webpack

Es un bundler, nos permite escribir nuestro codigo modularizado en distintas partes para mejorar nuestra experiencia de desarrollo y en el momento en que querramos ejecutar el proyecto mergea todos los modulos creando una version optimizada para el navegador.

No solo nos permite buildiar archivos Js sino tambien archivos estaticos como html o css(o sass)
Todas las configuraciones se encuentran en el archivo webpack.config.js

Webpack recibe entries y genera ouputs.

Entries → nuestro codigo sin optimizar, tambien se va a tomar en cuenta los archivos a los que se haga referencia dentro del que nombramos como entry
Output → marcamos donde queremos que se genere la version optimizada de nuestro codigo

entry: './src/main.js',
output: {
  path: path.resolve(__dirname, './dist'),
  publicPath: '/dist/',
  filename: 'build.js'
},

Module

rules → Nos permite generar acciones intermedias entre que se produce la entrada y se genera la salida

En la prop test le indicamos una expresion regular que va a chequear todos los archivos buscando el patron deseado

Checkear que cumpla con reglas de linteo
Si los test pasan
Compilar Sass al css
Etc

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ],
      },
      {
        test: /\.sass$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader?indentedSyntax'
        ],
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
            // the "scss" and "sass" values for the lang attribute to the right configs here.
            // other preprocessors should work out of the box, no loader config like this necessary.
            'scss': [
              'vue-style-loader',
              'css-loader',
              'sass-loader'
            ],
            'sass': [
              'vue-style-loader',
              'css-loader',
              'sass-loader?indentedSyntax'
            ]
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: false,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

Este bloque de codigo chequea si el env es dev o prod para generar los cambios necesarios

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

Leonardo Campo Romero

student•

¿Cómo configuro Webpack con vue-cli 3?

Nicolas Alberto Henao Avendañ

student•

La versión 3 del cli viene ya con sus propios templates, según tengo entendido no es necesario ya el uso de webpack

Irineo Aragón Quintero

student•

Se necesita una actualización de este curso, por favor

Blanca Segura Garcia

student•

Este es un buen curso, por el profesor. Hay una nueva version de vue3 pero el profesor de ese curso, si bien sabe el tema, pero no sabe explicar ... Ignacio es para mi un buen profesor, por eso no importa si el curso esté desactualizado lo escucho para aprender de lo que explica. Vale ya de por si ...

Alan Lapierre

student•

Hay grandes cambios de Vue 2 a Vue 3 ?

Manuel Ojeda

student•

Aún no se han anunciado todos los cambios que tendrá, pero a palabras de Evan You, la manera de como hacemos Vue 2 funcionará en Vue 3

https://medium.com/vue-mastery/evan-you-previews-vue-js-3-0-ab063dec3547

Ayda Yineth Montoya Henao

student•

Adjunto el codigo con algunos comentarios para entenderlo mejor:

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js', /* archivo de entrada */
  output: {  /* punto de salida */
    path: path.resolve(__dirname, './dist'), /* indica donde esta la carp donde se quiere gener el output */ 
    publicPath: '/dist/',
    filename: 'build.js' /* archivo que tiene todo el contenido de la app */
  },
  module: {
    rules: [ /* son transformaciones intermedias del proceso de entrada y salida */ 
      {
        test: /\.css$/, /* indica que la prp test indica que archivoa aplican la transf */ 
        use: [
          'vue-style-loader', 
          'css-loader'
        ],
      },
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ],
      },
      {
        test: /\.sass$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader?indentedSyntax'
        ],
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: { 
            'scss': [
              'vue-style-loader',
              'css-loader',
              'sass-loader'
            ],
            'sass': [
              'vue-style-loader',
              'css-loader',
              'sass-loader?indentedSyntax'
            ]
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader', /* la app funcionaria con todos los browsers */
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader', /* permite extraer archivos jpg, img */
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: { /* le dice cuales son los archivos que debe compilar */
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: { /* permite usar la app usando un servidor web */
    historyApiFallback: true,
    noInfo: false, /* Se pasa de true a false para ver mas info en consola */
    overlay: true
  },
  performance: { /* permite dar pistas sobre problemas del tam de archivo */ 
    hints: false
  },
  devtool: '#eval-source-map' /* permite generar sourse map */ 
}

if (process.env.NODE_ENV === 'production') { /* pregunta o evalua si se esta corriendo webpack para produccion o no */ 
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

Luis Dario Rodriguez Lemus

student•

Configuracion: De webpack: devServer.noInfo a false

Teofilo Rosales Gama

student•

Por si se lo perdiero estos son los comando:

$ vue init webpack-simple mi-proyecto
$ cd mi-proyecto
$ npm install
$ npm run dev
$ npm run build(produccion)

Jafet López Chaves

student•

😂 gracias, muy util!

Juan Manuel Viveros Martinez

student•

Que tan conveniente o cuales son los beneficios de dejar la propiedad ?[hash] en la configuración del webpack

{
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }

En el curso anterior de vue.js el dejar el name: ‘[name].[ext]?[hash]’ de esta manera generaba conflictos al subirlo al servidor de producción ya que agregaba un código hash extra y no encontraba la ruta de la imagen, para que se deja al final ?[hash] Gracias por sus comentarios amigos.

Edward Steven Ramos Palacios

teacher•

Desde mi experiencia te cuento que el hash que mencionas, es muy útil porque usualmente el navegador suele “hacer caché” de los archivos que usa un sitio. Dicho esto, el hash lo que permite es forzar siempre al browser para cargar de nuevo los archivos cacheados ya que el nombre, en realidad es el hash, cambia cada vez que se hace el build. Si no usaramos el hash, lo que pasaria es que el archivo siempre tendria el mismo nombre y el browser no lo actualizaria, siempre que hayan cambios, ya que ya lo tiene cacheado. Aqui te dejo una lectura: Hash

Naldo Duran

student•

👌

Alexander Silvera

student•

Webpack: Tiene el propósito de trabajar con diferentes archivos en nuestro desarrollo local, pero generando un único archivo, aunque podemos configurarlo para que sea uno, dos o tres archivos, eso depende de cómo lo necesitemos.

Seba Cardoso

student•

Como veo el signo de ==== del if en el minuto 10:05?

Diego Forero

Team Platzi•

Es por el tipo de fuente que usa en el editor de texto, busca la fuente Fira Code y algo sobre font ligatures, yo tengo ese misma característica en pycharm

Iván Toro

student•

Para Atom.

Cómo funciona webpack.config.js

Introducción

Aplicaciones profesionales con Vue.js

Vue como framework progresivo y reactivo

CLI y Dev Tools

Instalación de Vue.js: Node, Dev Tools y CLI

Crear una aplicación Vue con CLI y webpack