Single File Components & Vue Loader
Introducción
Conceptos esenciales
Uso práctico
- 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 enmain.js
. También debemos mover el código CSS demain.css
a nuestro nuevoApp.vue
. Pudiendo entonces eliminar el directorio/css
al completo. - Ahora, en
main.js
debemos importarApp.vue
e instanciar Vue a la CLI way. Además, enindex.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.
Código inicial
¿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.