Procesar Vue con Webpack

• 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",
  },
},