Aprende Webpack desde cero

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

No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue