Single File Components & Vue Loader

• Seguro que coincides conmigo: una de las mejores características de Vue son sus Single File Components (o SFC). Como sabes, se trata de archivos con extensión .vue, algo que de forma nativa ningún navegador entiende. Ni Chrome, ni Firefox ni ningún otro entiende ese idioma, por continuar con la misma analogía.
• Como ahora ya sabes lo que es loader, sabrás qué necesitamos algo que permita a Webpack transformar un Single File Component de Vue en algo que los navegadores puedan entender. Algo como como Vue Loader.
• Vue Loader incorpora toda esa información, además de un montón más de herramientas y características.
• De forma general, sueles tener acceso a Vue Loader y a los Single File Components al crear un proyecto con el interfaz de línea de comando de Vue: Vue CLI.
• Sin embargo, nosotros estamos creando nuestra configuración de Webpack desde cero, así que tenemos que implementar Vue Loader nosotros mismo, un camino que se indica en la documentación.
• Instalaremos Vue Loader y sus dependencias con npm install -D vue-loader vue-template-compiler.
• Aprovechando, vamos a re-estructurar los archivos de nuestra App para hacer el mejor uso de Vue loader y sus SFC. Si has usado Vue CLI antes, la estructura resultante te resultara muy familiar.
• Primero, crearemos otro SFC llamado CatImage.vue en el directorio /components con la lógica que permita mostrar la imágen adecuada en nuestro Cat Grid.
• Luego, debemos crear un Single File Component llamado App.vue con la lógica que antes estaba en main.js. También debemos mover el código CSS de main.css a nuestro nuevo App.vue. Pudiendo entonces eliminar el directorio /css al completo.
• Ahora, en main.js debemos importar App.vue e instanciar Vue a la CLI way. Además, en index.html debemos limpiar el código innecesario y crear un elemento con id #app para que la instancia principal de Vue se asiente.
• Con todo ello, vamos actualizar nuestra configuración de Webpack, tal como indica en la documentación de Vue Loader, requiriendo el plugin asociado y crear un nuevo set de reglas.

const VueLoaderPlugin = require("vue-loader/lib/plugin");
module: {
  rules: [
    {
      test: /\.vue$/,
      loader: "vue-loader",
    },
  ];
}
plugins: [new VueLoaderPlugin()];

• Por último, como ahora estamos procesando nuestro código CSS a través de los Single File Components, debemos instalar y configurar un Vue Style Loader con npm install --save-dev vue-style-loader y usarlo para desarrollo e conjunción con MiniCSSExtractPlugin para poder procesar esos estilos y extraerlos en modo producción.

{
	test: /\.css$/,
	use: [isDevelopment ? "vue-style-loader" : MiniCSSExtractPlugin.loader, "css-loader"]
},

• Podemos probar a lanzar nuestra tarea serve y comprobar como todo funciona correctamente. También podemos lanzar una compilación de producción y correr el bundle en el navegador.