Uso de Copy Webpack Plugin para Mover Archivos en Proyectos Node.js

Clase 9 de 28 • Curso de Webpack

Contenido del curso

Introducción a Webpack

Proyecto inicial

Loaders y Plugins en Webpack

Deploy del proyecto

Herramientas de desarrollo complementarias

Integración básica de React.js

Próximos pasos

28
Configuración y Uso de Webpack con React
00:48 min

Tomar examen

Resumen

¿Cómo utilizar el plugin Copy Webpack Plugin?

Trabajar con proyectos a menudo exige mover archivos de una ubicación a otra dentro de la estructura del proyecto. Para esto, es fundamental saber utilizar herramientas que optimicen dicho proceso. El plugin Copy Webpack Plugin en Webpack resuelve esta necesidad al facilitar la copia de archivos de un directorio de origen a uno de destino automáticamente. Esta guía te ayudará a comprender cómo implementarlo en tu proyecto.

¿Cómo instalar y configurar el plugin?

Iniciar la instalación del plugin es sencillo. Necesitas seguir estos pasos para integrarlo correctamente en tu proyecto:

Instalación del plugin: Abre tu terminal y ejecuta el comando para instalarlo como una dependencia de desarrollo:
```
npm install copy-webpack-plugin --save-dev
```

Integración en Webpack: Agrega soporte para el plugin en la configuración de Webpack. Para esto, modifica el archivo webpack.config.js:

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  // otras configuraciones de webpack
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: 'src/assets/images', to: 'dist/assets/images' },
      ],
    }),
  ],
};

Esta configuración permite copiar todos los archivos desde la carpeta src/assets/images a dist/assets/images. Esto es especialmente útil cuando se necesita trasladar múltiples archivos sin esfuerzo manual.

¿Cómo ajustar el template del proyecto?

Ahora, asegúrate de que tu template HTML esté correctamente configurado para acceder a estas imágenes. Cambia las rutas de las imágenes para que apunten al nuevo directorio de destino:

<img src="/assets/images/twitter.png" alt="Twitter">
<img src="/assets/images/github.png" alt="GitHub">
<img src="/assets/images/instagram.png" alt="Instagram">

Modifica cualquier instancia previa que apunte al directorio src. Con esto, tu proyecto queda estructurado de forma más adecuada, leyendo las imágenes desde su nueva ubicación.

¿Qué verificar después de la implementación?

Después de activar el comando de desarrollo para ver los cambios, es crucial verificar que los elementos se han movido correctamente:

Ejecuta el comando npm run dev para construir nuevamente tu proyecto.
Revisa el directorio dist para confirmar que las imágenes se hayan copiado adecuadamente.
Usa inspectores de elementos en tu navegador para asegurarte de que las rutas de las imágenes en el HTML dirijan al directorio correcto.

Recomendaciones y consejos adicionales

El Copy Webpack Plugin es invaluable no solo para transferir imágenes, sino también otros recursos como fuentes o archivos específicos que no necesitas compilar.
Asegúrate de mantener un estándar en tu proyecto utilizando siempre las mismas comillas para evitar errores de formato.
Practica la actualización de rutas y configuración de archivos en proyectos de desarrollo reales para familiarizarte mejor con el proceso.

Este conocimiento y habilidad te permitirán optimizar operaciones repetitivas y organizar eficientemente los recursos de tus proyectos. ¡Continúa explorando y mejorando tus habilidades técnicas!

Comentarios

Rony Porraz Vargas

student•

:D Aqui tienes los comando para que no quedes como goku o_0 NPM

npm i copy-webpack-plugin -D

YARN

yarn add copy-webpack-plugin -D

Marco Antonio Mejía López

student•

gracias

Alonso Fabricio Samanez Nuñez

student•

Gracias

Fernando Quinteros Gutierrez

student•

🗂️ Copia de archivos con Webpack

Apuntes

Si tienes la necesidad de mover un archivo o directorio a tu proyecto final podemos usar un plugin llamado "copy-webpack-plugin"
Para instalarlo debemos ejecutar el comando

Para npm

npm i copy-webpack-plugin -D

Para yarn

yarn add copy-webpack-plugin -D

Para poder comenzar a usarlo debemos agregar estas configuraciones a webpack.config.js

...
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
	...
  plugins: [
    new CopyPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, "src", "assets/images"),
          to: "assets/images"
        }
      ]
    }),
  ]
}

Es importante las propiedades from y to
- From ⇒ que recurso (archivo o directorio) deseamos copiar al directorio final
- To ⇒ en que ruta dentro de la carpeta final terminara los recursos

Anibal Fernando Ortega Piedrahita

student•

Excelente resumen de la clase. Felicitaciones por estar tan activo.

Matías Wasiak

student•

Muchas gracias por el resumen!

Emmanuel Rodríguez

student•

Resolve o Join path Cuando trabajamos en entorno de Node, habrán ocasiones que deberamos describir, mediante una dirección absoluta, el directorio de trabajo. En Node, tenemos una libreía nativa pathpara resolver este caso.

Abrán veces que necesitmeos resolver o unir directorios de trabajos. Donde, con una simple declaración, podriamos caer en un sencillo copy & paste sin entender sus efectos (que pudiesen ser similares).

Cuando deseen estructurar un directorio de trabajo a partir de una dirección absoluta, sin importar el SO, se utiliza path.resolve([...paths]) por ello, si queremos utilizar nuestro directorio de trabajo como una referencia, utilizamos __dirname y de ahí, resolverá el conjunto de paths que le anexemos:

/*
En nuestro ejemplo, resolverá nuestro path en /user/path/to/workdirectory/ + src + assets/images
quedando algo similar a /users/path/to/js-portfolio/src/assets/images
*/
path.resolve(__dirname, 'src', 'assets/images')

Se tendrá que ser cuidadoso en el proceso de construcción porque cada forma de escribir el path, generará en un path diferente:

path.resolve('/foo/bar', './baz');
// Returns: '/foo/bar/baz'

path.resolve('/foo/bar', '/tmp/file/');
// Returns: '/tmp/file'

path.resolve('wwwroot', 'static_files/png/', '../gif/image.gif');
// If the current working directory is /home/myself/node,
// this returns '/home/myself/node/wwwroot/static_files/gif/image.gif'

Rodrigo Rodriguez

student•

Muy bueno tu aporte, y hace pensar, no simplemente copiar y pegar sin saber que estamos haciendo.

Matías Wasiak

student•

Gracias por el aporte!

Rony Porraz Vargas

student•

Te dejo el config webpack para que no tengas dudas

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CopyPlugin = require('copy-webpack-plugin')

module.exports = {
    // mode: 'production', // LE INDICO EL MODO EXPLICITAMENTE
    entry: './src/index.js', // el punto de entrada de mi aplicación
    output: { // Esta es la salida de mi bundle
        path: path.resolve(__dirname, 'dist'),
        // resolve lo que hace es darnos la ruta absoluta de el S.O hasta nuestro archivo
        // para no tener conflictos entre Linux, Windows, etc
        filename: 'main.js', 
        // EL NOMBRE DEL ARCHIVO FINAL,
    },
    resolve: {
        extensions: ['.js'] // LOS ARCHIVOS QUE WEBPACK VA A LEER
    },
    module: {
        // REGLAS PARA TRABAJAR CON WEBPACK
        rules : [
            {
                test: /\.m?js$/, // LEE LOS ARCHIVOS CON EXTENSION .JS,
                exclude: /node_modules/, // IGNORA LOS MODULOS DE LA CARPETA
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.css|.styl$/i,
                use: [ MiniCssExtractPlugin.loader, 'css-loader' , 'stylus-loader' ]
            }
        ]
    },
    // SECCION DE PLUGINS
    plugins: [
        new HtmlWebpackPlugin({ // CONFIGURACIÓN DEL PLUGIN
            inject: true, // INYECTA EL BUNDLE AL TEMPLATE HTML
            template: './public/index.html', // LA RUTA AL TEMPLATE HTML
            filename: './index.html' // NOMBRE FINAL DEL ARCHIVO
        }),
        new MiniCssExtractPlugin(), // INSTANCIAMOS EL PLUGIN
        new CopyPlugin({ // CONFIGURACIÓN DEL COPY PLUGIN
            patterns: [
                {
                    from: path.resolve(__dirname , "src" , 'assets/images'), // CARPETA A MOVER AL DIST
                    to: "assets/images" // RUTA FINAL DEL DIST
                }
            ]
        })
    ]
}

Aitor Santana Cabrera

student•

Este hombre va a la velocidad de la luz explicando, y eso que lo tengo en x1 jajaja

Reinaldo Mendoza

student•

Creo que vamos muy por encima en muchos conceptos

Eban Sayago Melián

student•

HookWebpackError: Invalid host defined options

Para los que tengan el error:

[webpack-cli] HookWebpackError: Invalid host defined options

Esto se debe a un error en la versión 10 de copy-webpack-plugin. Lo único que deben cambiar es la versión del mismo en el package.json a ^9.1.0.

"devDependencies": {
  "copy-webpack-plugin": "^9.1.0",
}

El ^ en la versión quiere decir que la instalación se puede diferenciar máximo por una "minor update". Es lo mismo que poner 9.x o directamente 9. About semantic versioning (NPM)

Rigoberto Isvaku Quezada González

student•

Muchas gracias amigo, estaba teniendo este problema y dándome de topes en la cabeza, pero probé tu solución y me funcionó :D

Miguel Ángel Peña Sánchez

student•

Definitivamente un héroe sin capa

Irving Juárez

student•

¿Qué pasa si solo copio la carpeta y la pego en la carpeta dist?

Me entro la curiosidad, porque instalar este plugin cuando podemos simplemente copiar y pegar los archivos en la carpeta dist? Me saldrá un bug si lo hago de la manera "manual"?. Entonces, eso fue lo que hice. En vez de hacer todo el procedimiento, solo copie y pegue la carpeta assets/images en la carpeta dist desde la terminal, además de cambiar la dirección en el template hecho con JavaScript. . Lo que paso fue exactamente lo mismo, realmente nada cambio. Todo funcionaba muy bien. Entonces no se porque tengamos que descargar este plugin 🤔

Lucas Xavier Gonzalez

student•

Es porque webpack esta pensado para ser lo que se mande a producción, el producto final. No es ideal hacer el traspaso a mano ya que no se va a trabajar directamente sobre la carpeta dist, sino, sobre otras carpetas

Adrian Salgado

student•

Tambien porque de esta manera webpack nos permite automatizar tareas simples como copiar una carpeta Que cuando el proyecto es demasiado grande es un punto muy bueno

Christian Alvarenga

student•

Tengo una duda, todo lo que este en la carpeta dist es lo que va luego a producción, ¿no? Otra duda que me surge es, al momento de estar realizando ya un proyecto, nosotros trabajaremos en las carpetas de public y src, ¿no?

P.D.: Me esta fascinando esta herramienta (un poco compleja al comienzo pero, super necesario creo yo)

Nilson Diaz

student•

Hola ! Estas en lo correcto , normalmente cuando haces deploy de una aplicacion en Servicios como netlify , Vercel o heroku , estos servicios se encargan de ejecutar tu script de build y servir tu bundle generado por webpack en la carpeta que le indiques muy comunmente es "dist"

normalmente vas a trabajar mas en la carpeta src que es donde vive todo tu codigo y tal vez modificar algunas cosas en la carpeta public en tu html , no deberiamos tocar nada dentro la carpeta de produccion, en lo posible generarlo con webpack

Webpack y tantas configuraciones puede ser un poco confuso al principio es cuestion de practicar y vale bastante la pena aprenderlo , luego para reafirmar conocimientos puedes tomar el Curso practico de webpack

Buena suerte 💚!

Christian Alvarenga

student•

Muchas gracias por tu respuesta Nilson. :)

Miguel Hernández Casiano

student•

Tus posibles dudas resueltas

1. ¿De dónde rayos sale el patterns que utiliza el profesor?

Es una de las opciones que tiene el plugin para configrar. El plugin tiene dos parámetros:

patterns
options . Y a su vez, cada uno de esos parámetros, tiene más opciones que se pueden configurar. En la documentación pueden encontrar la información completa. .

2. ¿Por qué usamos path.resolve en este plugin?

Porque webpack necesita una ruta absoluta para saber dónde están los archivos. En este caso le estamos una ruta relativa respecto a la carpeta de nuestro proyecto, pero lo que hace pathes devolver la ruta con respecto a nuestro disco duro.

Andres Felipe Pinchao Ramirez

student•

MY NOTES COPY OF ARCHIVES WITH WEBPACK :D

En esta clase veremos como mover un archivo o elemento dentro de src hacia la carpeta de distribution para eso veremos un plugin que se llama copiwebpack el cual nos va ayudar a mover estos archivos o recursos que necesitamos.

Primero instalamos el plugin

npm install copy-webpack-plugin -D

Importamos el plugin en nuestro archivo de configuración de webpack

//Importamos el plugin para poder hacer uso de el 
const CopyPlugin = require('copy-webpack-plugin');

Lo instanciamos en nuestros plugins para poder hace uso de el

plugins: [
  
    new HtmlWebpackPlugin({

      inject: true,

      template: './public/index.html',

      filename: './index.html' 

    }),
    new MiniCssExtracPlugin(),
    //Instanciamos el plugin
      //Luego le pasamos por parametro la configuracion que va a tener
    new CopyPlugin({
      patterns:[
        {
          //De esta forma decimos que aqui es donde se encuentran los archivos 
            //Que vamos a mover
          from: path.resolve(__dirname, 'src','assets/images'),
          //hacia donde lo vamos a mover
          to: "assets/images"
        }
      ]
    })
  ]

Leobardo Adrian Diaz Ruiz

student•

Muy bien explicado :D

Miguel Angel Reyes Moreno

student•

Copia de archivos con Webpack

npm i copy-webpack-plugin -D nos servirá para copiar archivos y lanzarlos a la carpeta dist.

Erasmo Hernández

teacher•

En este video faltó instalar el plugin de Copy primero antes de ir a agregarlo al Webpack.config.

npm i copy-webpack-plugin -D

Juan Castro

teacher•

¡No faltó! Lo hacemos en el primer minuto. :)

Santiago Escalante

student•

Cómo que faltó? Estás seguro que viste la clase?

Aarón Castillo

student•

Es posible que les ocurra un error del tipo:

[webpack-cli] HookWebpackError: Not supported

Esto de debe a la incompatibilidad de versiones y se soluciones en dos sencillos pasos:

1.- Desinstalando la versión actual de copy-webpack-plugin

npm uninstall copy-webpack-plugin -D

2.- Instalando un versión un poco anterior.

npm install copy-webpack-plugin@^9.1.0 -D

Miguel Ortiz

student•

Gracias por el aporte, estuve buscando varios minutos el por que del error.

Juan Carlos Aguilar

student•

Gracias, me ayudó mucho!

Edgar Lopez Arroyo

student•

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  resolve: {
    extensions: ['.js']
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css|.styl$/i,
        use: [MiniCssExtractPlugin.loader,
          'css-loader'
        ],
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: './public/index.html',
      filename: './index.html'
    }),
    new MiniCssExtractPlugin(),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, "src", "assets/images"), //Archivos que se van a mover
          to: "assets/images" // Hacia donde moveremos esos recursos
        }
      ]
    }),
  ]
}```

Reinaldo Mendoza

student•

Gracias

Luis Felipe Medina Rodriguez

student•

lo que entiendo es que debemos de pasar todo lo que se va a publicar lo que va a ver el cliente el usuario es la carpeta dist si?

Sneyder Barreto

student•

¡Hola!

Así es. Como estamos trabajando todos nuestros assets de manera local, debemos pasarlos a la carpeta dist para tener acceso a ellos en producción.

Un saludo.

Andrés Felipe Acevedo Del Rio

student•

y si quiere copiar más de una carpeta?

Irving Juárez

student•

En webpack.config.js haces otro pattern y ya esta

Patrick Jeremy Rodriguez Sandoval

student•

Para todos los que tengas el HookWebpackError: Not Supported, pueden hacer lo siguiente:

1.Actualiza tu node.

npm instalar node@12.20.0 -g

Reducir la versión de copy-webpack-plugin

npm install copy-webpack-plugin@9 -D

Luis Eduardo Ladino Fino

student•

Caballero buena noche al hacer el comando de install no me deja hacer la debida instalación tambien lo intente con sudo npm y nada..sabes el problema

David Campos

student•

Hay ocasiones en los proyecto en las que tenemos que copiar archivos de una carpeta a otra, como imágenes, íconos, etc. Para hacer esto de manera automática podemos usar el plugin de Webpack llamado copy-webpack-plugin.

Este plugin puede copiar archivos individuales o hasta carpetas completas a la carpeta resultante de Webpack. Estas carpetas o archivos ya deben existir previamente.

Para instalar el plugin usamos el comando: npm i copy-webpack-plugin -D.

Una vez instalado hay que realizar la configuración pertinente, pero primero hay que identificar que archivos son los que se desea mover. En este caso es la carpeta images que está dentro de assets.

Ahora sí la configuración. Primero hay que crear la variable para importar como con todos los plugins:

Después en la sección de plugins agregamos la configuración del plugin, esta tiene la propiedad patterns que recibe un arreglo, dentro agregamos un objeto con la propiedad from, que es de donde va a tomar el archivo o carpeta y el propiedad to, que es donde se almacenará pero ya dentro de dist.

Aldo Yedro

student•

Buena clase!

...
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
	...
  plugins: [
    new CopyPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, "src", "assets/images"),
          to: "assets/images"
        }
      ]
    }),
  ]
}

/*
En nuestro ejemplo, resolverá nuestro path en /user/path/to/workdirectory/ + src + assets/images
quedando algo similar a /users/path/to/js-portfolio/src/assets/images
*/
path.resolve(__dirname, 'src', 'assets/images')

path.resolve('/foo/bar', './baz');
// Returns: '/foo/bar/baz'

path.resolve('/foo/bar', '/tmp/file/');
// Returns: '/tmp/file'

path.resolve('wwwroot', 'static_files/png/', '../gif/image.gif');
// If the current working directory is /home/myself/node,
// this returns '/home/myself/node/wwwroot/static_files/gif/image.gif'

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CopyPlugin = require('copy-webpack-plugin')

module.exports = {
    // mode: 'production', // LE INDICO EL MODO EXPLICITAMENTE
    entry: './src/index.js', // el punto de entrada de mi aplicación
    output: { // Esta es la salida de mi bundle
        path: path.resolve(__dirname, 'dist'),
        // resolve lo que hace es darnos la ruta absoluta de el S.O hasta nuestro archivo
        // para no tener conflictos entre Linux, Windows, etc
        filename: 'main.js', 
        // EL NOMBRE DEL ARCHIVO FINAL,
    },
    resolve: {
        extensions: ['.js'] // LOS ARCHIVOS QUE WEBPACK VA A LEER
    },
    module: {
        // REGLAS PARA TRABAJAR CON WEBPACK
        rules : [
            {
                test: /\.m?js$/, // LEE LOS ARCHIVOS CON EXTENSION .JS,
                exclude: /node_modules/, // IGNORA LOS MODULOS DE LA CARPETA
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.css|.styl$/i,
                use: [ MiniCssExtractPlugin.loader, 'css-loader' , 'stylus-loader' ]
            }
        ]
    },
    // SECCION DE PLUGINS
    plugins: [
        new HtmlWebpackPlugin({ // CONFIGURACIÓN DEL PLUGIN
            inject: true, // INYECTA EL BUNDLE AL TEMPLATE HTML
            template: './public/index.html', // LA RUTA AL TEMPLATE HTML
            filename: './index.html' // NOMBRE FINAL DEL ARCHIVO
        }),
        new MiniCssExtractPlugin(), // INSTANCIAMOS EL PLUGIN
        new CopyPlugin({ // CONFIGURACIÓN DEL COPY PLUGIN
            patterns: [
                {
                    from: path.resolve(__dirname , "src" , 'assets/images'), // CARPETA A MOVER AL DIST
                    to: "assets/images" // RUTA FINAL DEL DIST
                }
            ]
        })
    ]
}

plugins: [
  
    new HtmlWebpackPlugin({

      inject: true,

      template: './public/index.html',

      filename: './index.html' 

    }),
    new MiniCssExtracPlugin(),
    //Instanciamos el plugin
      //Luego le pasamos por parametro la configuracion que va a tener
    new CopyPlugin({
      patterns:[
        {
          //De esta forma decimos que aqui es donde se encuentran los archivos 
            //Que vamos a mover
          from: path.resolve(__dirname, 'src','assets/images'),
          //hacia donde lo vamos a mover
          to: "assets/images"
        }
      ]
    })
  ]

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  resolve: {
    extensions: ['.js']
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css|.styl$/i,
        use: [MiniCssExtractPlugin.loader,
          'css-loader'
        ],
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: './public/index.html',
      filename: './index.html'
    }),
    new MiniCssExtractPlugin(),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, "src", "assets/images"), //Archivos que se van a mover
          to: "assets/images" // Hacia donde moveremos esos recursos
        }
      ]
    }),
  ]
}```

Uso de Copy Webpack Plugin para Mover Archivos en Proyectos Node.js

Introducción a Webpack

Curso Avanzado de Webpack para Producción Web

Configuración y uso de Webpack para proyectos JavaScript modernos

Proyecto inicial

Configuración y Uso de Webpack en Proyectos JavaScript

Optimización de Proyectos Web con Webpack para Producción

Configuración básica de Webpack para proyectos JavaScript

Loaders y Plugins en Webpack

Integración de Babel y Webpack para compatibilidad JavaScript

Configuración de HTML-webpack-plugin en Webpack

Configuración de Webpack para CSS y Preprocesadores