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",
},
},
El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.
¿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.