A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Curso de Webpack

Curso de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

Copia de archivos con Webpack

9/28
Recursos

Aportes 32

Preguntas 9

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

馃槃
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

馃梻锔 Copia de archivos con Webpack

<h4>Apuntes</h4>
  • 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

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'

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
                }
            ]
        })
    ]
}

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

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 鈥渕inor update鈥. Es lo mismo que poner 9.x o directamente 9. About semantic versioning (NPM)

驴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 鈥渕anual鈥?. 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 馃

Muy bien explicado 馃槃

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
        }
      ]
    }),
  ]
}```
<h4>Copia de archivos con Webpack</h4>

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

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

npm i copy-webpack-plugin -D

MY NOTES COPY OF ARCHIVES WITH WEBPACK 馃槃

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"
        }
      ]
    })
  ]

Buena clase!

馃憣

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.

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

1.Actualiza tu node.

npm instalar [email protected] -g

  1. Reducir la versi贸n de copy-webpack-plugin

npm install [email protected] -D

Por si les llega a ocurrir, yo tuve que descargar los archivos de esta clase y reemplazarlos por los anteriores, al ver que aparec铆a en blanco la p谩gina JS portfolio. Entonces lo que hice previamente fue volver a ejecutar npm install stylus stylus-loader -D y luego de esto npm run dev, y ahi si funcion贸 a la perfecci贸n

esta herramienta y este curso estan geniales

Copia de archivos con Webpack

instalamos el plugin

npm i copy-webpack-plugin -D

Se import贸 y a帽adi贸 el plugin

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


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

Se cambi贸 los path en el template

Archivo completo de webpack.config.js

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 = {
	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|.scss|.styl$/i,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                'stylus-loader',
            ]
        }

    ]},
    plugins: [
        new HtmlWebpackPlugin({
            inject: true,
            template: './public/index.html',
            filename: './index.html'
        }),
        new MiniCssExtractPlugin(),
        new CopyPlugin({
            patterns: [
                {
                    from: path.resolve(__dirname, "src", "assets/images"),
                    to: "assets/images"
                }
            ]
        })
    ]

}

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 [email protected]^9.1.0 -D

ERROR Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only file and data URLs are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'
Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]:

este error me dio mucho dolor de cabeza, para poder solventar el error, instale la ultima version estable de node,
primero realice una limpieza de la cache, luego de esto procedi a actualizar node, una vez actualizado procedi a instalar la ultima version estable node, espero que les pueda servir de ayuda, aqui les dejo los comando
LIMPIAR CACHE
~$ sudo npm cache clean -f
ACTUALIZAR NODE
sudo npm install -g n
INSTALAR ULTIMA VERSION ESTABLE DE NODE
~$ sudo n stable

tengo un error y no puedo solucionarlo que mal curso, no puedo continuar.

no tengo duda de que el maestro sabe de su tema pero no ayudan en nada si pasa algo mal aqui

Para algunos clase innecesaria, para mi super interesante, ademas refuerza muchisimo conceptos del webpack, y antes (por ejemplo) las imagenes no me figuraban en index.html en la web, despues de realizar estos cambios si.

Error: Me sal铆a un error al cargar las fotos. Me arrojaba el icono de imagen rota. Yo lo arregle de la siguiente forma.
.
En el archivo Template.js modifique la futa de las im谩genes a esta y funciono

<img src= "/src/assets/images/twitter.png">

Saludos!

Me copia las fonts dentro de la carpeta images, y con el contenido del curso no aprend铆 lo suficiente para entender, detectar y solucionar el problema

Estaba recibiendo el error

Segmentation fault

al correr el build, tuve que eliminar dist, node_modules y package-lock.json para que funcionase

npm i copy-webpack-plugin -D

9.-Copia de archivos con Webpack

.
Para mover archivos de src a dist usamos un plugin que nos ayuda a mover los archivos o recursos.

npm install copy-webpack-plugin -D

Una vez instalado configuramos que elementos o archivos necesitamos mover de src a dist:

  • Primero identificamos qu茅 queremos mover. En este caso ser谩 la carpeta de images ya que en template estamos leyendo la imagen desde el src, que no es la forma apropiada, entonces pasaremos im谩genes a dist y ligaremos de manera adecuada el template para que funcione.
  • Podemos mover un solo archivo o toda la carpeta, en este caso moveremos toda la carpeta.
  • Una vez hecha la configuraci贸n vamos a cambiar el llamado en template de
src="../src/assets/images/image.png" a src="assets/images/image.png""

Excelente clase

Cuando trabajemos con proyectos tendremos la necesidad de mover archivos o elementos dentro de nuestro recursos hacia la carpeta de distribution, para eso vamos a utilizar un plugin llamado Copy-Webpack

npm i copy-webpack-plugin -D

Ya que lo tenemos, necesitamos configurar que elementos vamos a mover desde source hasta la carpeta de distribution. Primero hay que identificar que cosas queremos mover .En nuestro archivo de configuracion agregar la siguiente configuracion.

Al principio:

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

En el apartado de plugin vamos acrear una nueva instania de este mismo con:

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

Ahora cambiaremos el llamado de imagenes, haciendolo de forma directa y ya no saliendo a otra carpeta.

en EDteam lo explican mejor, vayan a ed.team/cursos