Por: Juan Andrés Núñez
Juan Andrés Núñez - juanwmedia

Especialista en tecnologías Web. Me dedico a enseñar desarrollo Web moderno a cualquier persona (físicamente en clase y a través de Internet) desde una perspectiva holística: teniendo en cuenta las competencias técnicas necesarias, junto a las habilidades personales o soft skills. Tienes más información en mi Web.

  • 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