• Podemos usar Webpack directamente, sin configuración. Eso sí, debemos entonces de seguir una estructura ya marcada. En nuestro caso no la seguimos por eso Webpack no puede hacer su trabajo.
  • Si quieres salir de las opciones por defecto desbes indicar a Webpack cómo actura. La forma más usual (aunque hay una API y otras opciones) es crear un archivo de configuración.
  • Vamos a crear nuestro webpack.config.js para darle instrucciones a Webpack a través de las propiedades que exportemos en este archivo.
  • La propiedad entry es la más importante.
    module.exports = {
    	entry: './index.js'
    }
  • Al hacerlo funcionar verás que crea el directorio dist, que suele ser el más utilizado. Antes de examinarlo, quizá querramos cambiarlo y así de paso jugamos con la propiedad output.
    ...
    output: {
    	filename: 'bundle.js',
    	path: './bundle' 
    }
  • Necesitamos un path absoluto así que podemos recurrir al módulo path de Node
    const path = require('path');
    ...
    path: path.resolve(__dirname, 'bundle'),
  • Ahora funciona pero hay muchísimo código en nuestro bundle. En esencia es el Webpack runtime. Permite entre tras cosas hacer que los módulos JavaScript funcionen en el navegador.
  • Podemos lanzar nuestro bundle con el interprete de Node: node bundle.js.
  • Hey, funciona!.
Storyblok: el primer CMS headless tanto para desarrolladores como para marketers

El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.

Código inicial
Curso Webpack en Escuela Vue

¿Tienes alguna pregunta sobre esta lección de Aprende Webpack desde cero?

Resuelve todas tus dudas sobre Webpack en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.

Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.

Twitter

Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.

Recibe novedades en tu 📬