webpack configuracion parte 1

Recordar etiqueta –config Alli va el archivo de configuracion 

la diferencia de webpack 5 es que hay muchas cosas qeu son automaticas

Webpack se componen de 3 partes

 

punto de entrada 

Primero creamos el proyecto con NPM init

 

				
					Npm Init

Creamos nuestro punto de entrada en /src/index.js, este es el que viene por defecto no hay necesidad de decirle a webpack 

en webpack no hace falta poner las extensiones porque las resuelve es decir

si es un app.js solo ponemos req URL_TO/app;

 

añadimos un script en el apartado de package.json

 

creamos una carpeta donde queremos nuestro proyecto

abrimos nuestro IDE dentro de nuestra carpeta y ejecutamos el comando

 

				
					Npm Init

Nos preguntara

 

  1. el nombre del proyecto
  2. la version
  3. La descripcion del proyecto
  4. El punto de entrada
  5. el comando de Pruebas
  6. si tiene un repositorio en git
  7. Las palabras claves
  8. El autor
  9. La licencia
  10. y por ultimo nos mostrara la version del documento y si estamos deacuerdo como queda

yo a todas estas opciones las deje por defecto puesto que hare mis configuraciones mas adelante

queda asi como la imagen

 

Nos crea el archivo Package.json

 

— INSERTAR AQUI IMAGEN 2–

 

creamos la carpeta src y dentro el archivo index.js.

–inserte imagen numero 3—

 

para probar que todo este funcionando ejecutamos el comando

				
					webpack

en caso de que no lo tengamos instalado debemos instalar webpack tenemos dos opciones instalarlo globalmente con el siguiente comando

				
					npm install --global webpack webpack-cli

o instalarlo localmente (solo valido para esta instalacion), se recomienda instalarlo localmente puesto que si lo instalamos globalmente solo vamos a disponer de una version de webpack y tendremos conflictos al abrir un proyecto de otra version asi que ejectucamos el comando 

				
					npm install --global webpack webpack-cli

Una vez ejecutado el comando webpack nos crea una carpeta llamada dist(de distribucion) y main.js 

 

INSERTE IMAGEN 4

 

Podemos añadir en el package .json el comando webpack seguido de la etiqueta que indica el modo en que compilara nuestros archivos en este caso desarrollo seria 

				
					  "build": "webpack --mode=development"

Quedando nuestro archivo index.js de esta manera

				
					{
  "name": "webpack-5-boilerplate",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode=development"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.58.0",
    "webpack-cli": "^4.9.0"
  }
}

en este punto no hemos creado un archivo de configuracion y estamos usando las configuraciones automaticas de webpack, debemos crear el archivo de configuracion podemos usar el nombre que viene por defecto webpack.config.js, o podemos cambiarle el nombre usando la etiqueta –config

				
					  "build": "webpack --mode=development --config=webpack.config.js"

ahora procedemos a crear el archivo webpack.config.js, podemos usar el nombre que nos guste sin embargo el estandar es «webpack.config.js» en la carpeta raiz, quedando asi 

El archivo webpack tienen varios apartados entre ellos destacan

  • Entry : el punto de entrada indica donde deberia comenzar a «procesar», por defecto es src/index.js
 
  •  
  • Output: es el resultado de compilar todo por defecto es dist/main.js
  • Loaders: por defecto webpack solo entiende archivos Json y Javascript, los loaders permiten procesar y convertir otros tipos de archivos, para que lo entienda el navegador
const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js',
  },
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
};
  • Plugins mientras los loaders son usados para trasnformar ciertos tipo de modulos, los puglings pueden usados para amplias tareas como optimizacion, manejo de dependencias, 
  • inyeccion de variables de entrono

ejemplo 

  •  
  •  
  • const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins

module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

    In the example above, the html-webpack-plugin generates an HTML file for your application and automatically injects all your generated bundles into this file.

  • Mode: por defecto viene como modo produccion (production) puedes elegir entre  desarrollo(development), produccion(production ) or no optimizar nada (none   )
  • Browser Compatibility: para compatibilidad con navegadores que no soporten promesas, requieres cargar un «polyfill» esto no lo trataremos en este post
 
__dirname __dirname is an environment variable that tells you the absolute path of the directory containing the currently executing file.
 
ahora bien definiendo  el ouput recurrimos a la libreria (The path module provides utilities for working with file and directory paths. It can be accessed using:) 
 
         // path: path.resolve(__dirname,’build’)

el archivo quedaria asi 

 
				
					const path = require('path');

module.exports = {
    //entry point default, its 
    // entry : './src/index.js',
    //change the output file
    output:{
        path: path.resolve(__dirname,'build')
    }
}

Ahora nuestra aplicacion va a ser en react este seria el primer paso para nuestra aplicacion de finanzas….

creamos el archivo 

./src/index.js

				
					import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'


ReactDOM.render(<App />, document.getElementById('root'))

creamos el archivo ./src/apps.js  con este contenido 

				
					const App = () => {
  
  return (
    <div className="container">    hello soy un modulo :D     </div>
  )
}

export default App

te va a salir un error como este — INSERTAR IMAGEN 7–

Esto de debido a que como dijimos arriba Webpack Solo entiende Javascript y Json, y la etiqeuta <app> es React entonces debemos hacer uso de un loader para cargar lo necesario para procesar el modulo de react en este caso necesitamos Babel para procesar 

Etiquetado

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *