• 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 importar Vue en nuestro archivo principal JavaScript.
  • Comentar script en index.html y hacer el import en index.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",
  },
},
Storyblok: el primer CMS headless tanto para desarrolladores como para marketers

El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.

Código inicial
Curso Webpack en Escuela Vue

¿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.

Twitter

Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.

Recibe novedades en tu 📬