Cómo utilizar configuraciones webpack personalizadas con Angular CLI Builders

Introducción

Índice
  1. Introducción
  • Prerrequisitos
  • Paso 1: Configuración del proyecto
  • Paso 2: creación de una pantalla de reloj localizada
  • Paso 3: Modificación de la visualización del reloj localizado con una configuración de paquete web personalizada
  • Conclusión
  • La CLI de Angular puede crear un nuevo proyecto de Angular y se encargará de la configuración de Webpack. Sin embargo, hay situaciones en las que querrás agregar una funcionalidad de Webpack personalizada.

    Para los fines de este artículo, aprenderá cómo usar la moment.jsbiblioteca y eliminar las configuraciones regionales no utilizadas para crear un tamaño de paquete más pequeño.

    Nota: moment.js es una biblioteca popular para manejar fecha y hora. Sin embargo, el estado actual del proyecto sugiere que puede haber otras bibliotecas con enfoques modernos que se adapten mejor a su proyecto según su público objetivo. Con fines educativos para reducir el tamaño de los paquetes, este artículo seguirá utilizando moment.js.

    En este artículo, tomará un proyecto existente generado por Angular CLI y lo usará @angular-builders/custom-webpackpara una configuración de webpack personalizada.

    Prerrequisitos

    Para completar este tutorial, necesitarás:

    • Node.js instalado localmente, lo cual puedes hacer siguiendo Cómo instalar Node.js y crear un entorno de desarrollo local .
    • Algunos conocimientos sobre la configuración de un proyecto Angular .

    Este tutorial fue verificado con Angular v10.2.0, @angular-builders/custom-webpackv10.0.1, moment.jsv2.29.1 y moment-locales-webpack-pluginv1.2.0.

    Paso 1: Configuración del proyecto

    Puedes usarlo @angular/clipara crear un nuevo proyecto Angular.

    En su ventana de terminal, utilice el siguiente comando:

    1. npx @angular/cli new AngularCustomWebpackConfig --style=css --routing=false --skip-tests

    Esto configurará un nuevo proyecto Angular con estilos establecidos en “CSS” (a diferencia de “Sass”, Less” o “Stylus”), sin enrutamiento y sin omitir pruebas.

    Navegue hasta el directorio del proyecto recién creado:

    1. cd AngularCustomWebpackConfig

    Luego puedes instalarlo moment.jsen tu proyecto e importarlo a tu proyecto:

    1. npm install moment@2.29.1

    Para reducir el tamaño de la moment.jsbiblioteca, también necesitarás agregar moment-locales-webpack-pluginlo siguiente devDependency:

    1. npm install --save-dev moment-locales-webpack-plugin@1.2.0

    Para utilizar una configuración webpack personalizada, deberá agregar @angular-builders/custom-webpacky @angular-builders/dev-servera su proyecto como devDependencypaquetes:

    1. npm install --save-dev @angular-builders/custom-webpack@10.0.1

    En este punto deberías tener un proyecto Angular generado por Angular CLI, moment.js, moment-locales-webpack-plugin, y @angular-builders/custom-webpack.

    Paso 2: creación de una pantalla de reloj localizada

    El proyecto de ejemplo para este artículo mostrará información de fecha y hora en francés.

    Ábralo app.component.tsen su editor de código e impórtelo momenty úselo para mostrar la hora actual en el formato del nombre del mes, día del mes, año y hora ( LLL) usando la frconfiguración regional francesa ( ):

    src/app/app.component.ts

    import { Component, OnInit } from '@angular/core';import * as moment from 'moment';@Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css']})export class AppComponent implements OnInit {  currentTimeFRLocale: string;  ngOnInit(): void {    moment.locale('fr');    this.currentTimeFRLocale = moment().format('LLL');  }}

    Luego, ábrelo app.component.htmlen tu editor de código y usa currentTimeFRLocale:

    src/aplicación/aplicación.componente.html

    h1{{ currentTimeFRLocale }}/h1

    Este código mostrará la cadena de fecha y hora.

    Ejecute la aplicación:

    1. npm start

    Y ábrelo en un navegador:

    Una vez que verifique que su aplicación funciona como se espera, tome nota de los valores de main.jsy vendor.jsen la consola;

    Unmodified Webpack Outputchunk {main} main.js, main.js.map (main) 15 kB [initial] [rendered]...chunk {vendor} vendor.js, vendor.js.map (vendor) 3.04 MB [initial] [rendered]

    El archivo del proveedor, que contiene moment.js, tiene un tamaño de 3,04 MB.

    Paso 3: Modificación de la visualización del reloj localizado con una configuración de paquete web personalizada

    moment.jsAdmite muchas configuraciones regionales de forma predeterminada. Si el público al que va dirigido su proyecto no requiere determinados idiomas, eliminar las configuraciones regionales que no sean necesarias puede ayudar a reducir el tamaño de los archivos. A su vez, los tamaños de archivo más pequeños permitirán que su aplicación se cargue más rápido para el usuario final.

    Con su editor de código, cree un nuevo custom-webpack.config.jsarchivo y agregue las siguientes líneas de código;

    paquete webkpack.config.js personalizado

    const MomentLocalesPlugin = require('moment-locales-webpack-plugin');module.exports = {  plugins: [    new MomentLocalesPlugin({      localesToKeep: ['fr']    })  ]};

    Esto requerirá el moment-locales-webpack-pluginy usarlo para mantener la frconfiguración regional, que serán términos de fecha y hora en el idioma francés.

    A continuación, deberá modificarlo angular.jsonpara utilizar esta nueva configuración.

    Ábrelo angular.jsonen tu editor de código. Dentro del architect/buildobjeto, actualiza el origen buildery agrega la clave:@angular-devkit/build-angular:browser@angular-builders/custom-webpack:browsercustomWebpackConfig

    angular.json

    "architect": {  "build": {    "builder": "@angular-builders/custom-webpack:browser",    "options": {      "customWebpackConfig": {        "path": "./custom-webpack.config.js",        "replaceDuplicatePlugins": true      },      // ...    },    // ...  },  // ...}

    Esto creará la aplicación con la configuración webpack personalizada.

    También querrás aplicar la configuración webpack personalizada al desarrollar localmente.

    Revisa el angular.jsoncódigo en tu editor. Dentro del architect/serveobjeto, actualiza el builderfrom @angular-devkit/build-angular:dev-servera @angular-builders/custom-webpack:dev-server:

    angular.json

    "architect": {  // ...  "serve": {    "builder": "@angular-builders/custom-webpack:dev-server",    "options": {      "browserTarget": "AngularCustomWebpackConfig:build"    },    "configurations": {      "production": {        "browserTarget": "AngularCustomWebpackConfig:build:production"      }    }  },  // ...}

    En este punto, su aplicación sabe qué usar @angular-builders/custom-webpacken lugar de @angular-devkit/build-angulary dónde buscar la configuración webpack personalizada.

    Nota: Anteriormente, el @angular-builders/dev-serverpaquete era obligatorio. Sin embargo, desde la versión 8, ha quedado obsoleto y @angular-builders/custom-webpack:dev-serverse debe utilizar en su lugar.

    Ejecute la aplicación:

    1. npm start

    Una vez que verifique que su aplicación funciona como se espera, tome nota de los valores de main.jsy vendor.jsen la consola.

    Mirando hacia atrás, la configuración del paquete web sin modificar se generó main.jscon vendor.jslos siguientes tamaños de archivo:

    Unmodified Webpack Outputchunk {main} main.js, main.js.map (main) 15 kB [initial] [rendered]...chunk {vendor} vendor.js, vendor.js.map (vendor) 3.04 MB [initial] [rendered]

    Ahora, con la configuración personalizada del paquete web, se han reducido los tamaños de los archivos main.jsy :vendor.js

    Custom Webpack Outputchunk {main} main.js, main.js.map (main) 9.91 kB [initial] [rendered]...chunk {vendor} vendor.js, vendor.js.map (vendor) 2.55 MB [initial] [rendered]

    Esto supone una diferencia de 5 kB y 490 kB respectivamente.

    Conclusión

    En este artículo, aprendiste a usar @angular-builders/custom-webpackuna configuración de webpack personalizada. El uso de una configuración de webpack personalizada puede ofrecerte un mayor control sobre tu proyecto que los valores predeterminados generados con Angular CLI.

    Si desea obtener más información sobre Angular, consulte nuestra página de temas de Angular para ver ejercicios y proyectos de programación.

    SUSCRÍBETE A NUESTRO BOLETÍN 
    No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.

    Deja una respuesta

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

    Subir

    Este sitio web utiliza cookies para mejorar tu experiencia mientras navegas por él. Este sitio web utiliza cookies para mejorar tu experiencia de usuario. Al continuar navegando, aceptas su uso. Mas informacion