En este artículo vamos a abordar otro de los elementos más fundamentales cuando estamos configurando un proyecto con Webpack. Se trata de copy-webpack-plugin, un plugin que como su nombre indica, permite el copiado de archivos en el directorio de output de un proyecto. A pesar de su importancia no lo habíamos tratado todavía con anterioridad, así que vamos con ello!!

Este plugin es muy necesario, puesto que muchos proyectos contienen archivos que simplemente queremos que figuren en la carpeta de destino, pero sobre los cuales no hace falta hacer ninguna transformación. Por ejemplo CSS de algún framework que estás usando, imágenes que quieres copiar tal cual, un JSON o cualquier otra cosa que necesite tu proyecto.

Copy-webpack-plugin muy sencillo de usar, por lo que no necesita muchas explicaciones. Lo veremos rápidamente con algunos ejemplos de configuración.

Instalar copy-webpack-plugin

Comenzamos por instalar este plugin en el proyecto, lo que consigues con el comando siguiente:

npm install copy-webpack-plugin -D

Configuración de webpack.config.js

Ahora vamos a ver el código que tienes que incorporar en tu archivo webpack.config.js para usar el copy webpack pluging.

// hacemos el require del plugin
const CopyPlugin = require('copy-webpack-plugin');

// configuramos el uso del plugin en module.exports
module.exports = {
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: 'origen', to: 'destino' },
      ],
    }),
  ],
};

No hay mucho misterio. La parte más interesante aquí es el lugar donde configuras qué quieres copiar y dónde lo quieres dejar.

Ejemplo de copiado de varios archivos y carpetas

Generalmente tendrás varias cosas que copiar, archivos sueltos y carpetas. Te indicamos aquí un código de configuración donde realizamos diversos copiados para que lo tengas de referencia.

new CopyPlugin({
  patterns: [
    { from: 'src/jquery.min.js', to: 'jquery.min.js' },
    { from: 'src/imagenes', to: '../images' },
    { from: 'icons', to: '../' },
  ],
}),

Imagina que el output lo tienes configurado como 'dist/js'. Realizaríamos estas acciones:

• Realiza el copiado del archivo que está en la ruta "src/jquery.min.js" a la ruta "dist/js/jquery.min.js".
• Realiza el copiado completo de la carpeta (y todos sus archivos) que está en la ruta "src/imagenes" a la carpeta "dist/images".
• Realiza la copia de la carpeta "icons" que tienes en la raíz del proyecto a la carpeta "dist/icons".

Pero si estamos en una aplicación frontend completa, como una SPA, posiblemente el output de Webpack lo tengas en una carpeta como "www" o "dist", en cuyo caso las rutas de los copiados podrían ser diferentes.

output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'js/app.js',
},

En un output configurado de esta manera, las rutas de destino de los archivos copiados tendrían valores similares a los siguientes:

new CopyPlugin({
  patterns: [
    { from: 'src/phaser.min.js', to: 'js/phaser.min.js' },
    { from: 'src/site.webmanifest', to: 'site.webmanifest' },
    { from: 'src/images', to: 'images' },
  ],
}),

Al final es un tema de rutas de origen y destino. Tendrás que adaptarlas a tus necesidades en cada proyecto y generalmente con un par de pruebas darás con la fórmula correcta para que los archivos copiados queden donde lo necesitabas.

Otros ajustes del patrón de copia

Aparte de "from" y "to", que son las opciones básicas para indicar qué es lo que queremos copiar y dónde lo queremos dejar, tenemos otra serie de alternativas.

Alguna útil sería por ejemplo "flatten" que admite un boleano y, en caso positivo, no copia todas las subcarpetas, sino que coloca todos los archivos en la misma carpeta, todos juntos. También puede ser útl "filter" que permite ejecutar una función para decidir si se debe copiar o no determinado contenido.

Lo mejor es leer la documentación, donde encontraremos el listado de atributos para los ajustes de las copias, junto con ejemplos de cada uno. https://github.com/webpack-contrib/copy-webpack-plugin

Opción de configuración del plugin para copiar archivos con Webpack

Como extra el plugin la posibilidad de ajustar una opción de configuración, que a decir verdad no he tenido que tocar nunca, para definir la concurrencia del copiado.

new CopyPlugin({
  patterns: [
    { from: 'origen', to: 'destino' },
  ],
  options: {
    concurrency: 100,
  },
}),

Conclusión

Hemos aprendido a trabajar con copy-webpack-plugin, uno de los plugins más populares de Webpack que usarás seguramente en todos o casi todos los proyectos que montes con este empaquetador de código.

El plugin es muy sencillo de usar y seguramente lo tengas dominado en cuestión de minutos. Pero también permite configuraciones más complejas si lo deseas, aunque la verdad no son tan usadas, puesto que generalmente es suficiente con indicar un origen y un destino de los archivos que quieras copiar.