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

el nombre del proyecto
la version
La descripcion del proyecto
El punto de entrada
el comando de Pruebas
si tiene un repositorio en git
Las palabras claves
El autor
La licencia
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

webpack configuracion parte 1

Share:

adminOteroWeb

Deje un comentario Cancelar la respuesta

Table of Contents

Related Posts

Yoga Class

Bohemian Life

Beauty Care

Green Rooms

SOBRE OTEROWEB

Entradas recientes

Boletin de novedades