Aprende Webpack desde cero

Cómo configurar Webpack

  • 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!.

No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue