Procesar Vue con Webpack
Introducción
Conceptos esenciales
Uso práctico
- Igual que hicimos con otras dependencias, vamos a dejar de incorporar Vue a través de
script
para hacerlo de una forma más moderna: a través de su módulo de Node. - Verás que en el punto de instalación en la documentación de Vue nos habla de cómo incorporarlo a través de NPM y de sus diferentes builds. Es conveniente que le echemos un ojo.
- Como verás existe una versión para todo tipo de módulos, desde UMD (es lo que cargas desde el CDN), pasando por CommonJS y acabando en los módulos ECMASCRIPT, que son los que nos interesan.
- Además existen versiones con el runtime y con runtime y compilador de plantillas. En nuestro archivo js tenemos una plantilla así que, aunque más adelante usaremos Single File Components y ya no nos hará falta el compilador, por ahora sí lo necesitamos. Como por defecto se carga el "runtime only", debemos especificar a Webpack que queremos resolver Vue usando el "full build", tal como aparece en la documentación.
module.exports = {
// ...
resolve: {
alias: {
vue$: "vue/dist/vue.esm.js",
},
},
};
- Por supuesto, debemos instalarlo con
npm install --save-dev vue
. Comentar nuestra llamada desde el CDN e importarVue
en nuestro archivo principal JavaScript. - Comentar
script
enindex.html
y hacer el import enindex.js
. - Únicamente debemos indicarle a Webpack cómo manejar Vue con la propidad
resolve
, tal como indica en la documentación. - Ahora, hacemos un
build
para comprobar que todo funciona correctamente. - Quizás te estés preguntando qué sentido tiene unir Vue con nuestro propio código JavaScript. Si hacemos un cambio en nuestro punto de entrada tenemos que volver a publicar el bundle entero y los usuarios descargárselo. Más adelante hablaremos de code splitting, la técnica utilizada para separar nuestro bundle en trozos (chunks) más pequeños.
- Es una de las características más potentes de Webpack. Por ahora veamos un teaser utilizando el plugin
SplitChunksPlugin
de Webpack.
optimization: {
splitChunks: {
chunks: "all",
},
},
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.