Cómo utilizar configuraciones webpack personalizadas con Angular CLI Builders
Introducció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.js
biblioteca 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-webpack
para 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-webpack
v10.0.1, moment.js
v2.29.1 y moment-locales-webpack-plugin
v1.2.0.
Paso 1: Configuración del proyecto
Puedes usarlo @angular/cli
para crear un nuevo proyecto Angular.
En su ventana de terminal, utilice el siguiente comando:
- 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:
- cd AngularCustomWebpackConfig
Luego puedes instalarlo moment.js
en tu proyecto e importarlo a tu proyecto:
- npm install moment@2.29.1
Para reducir el tamaño de la moment.js
biblioteca, también necesitarás agregar moment-locales-webpack-plugin
lo siguiente devDependency
:
- npm install --save-dev moment-locales-webpack-plugin@1.2.0
Para utilizar una configuración webpack personalizada, deberá agregar @angular-builders/custom-webpack
y @angular-builders/dev-server
a su proyecto como devDependency
paquetes:
- 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.ts
en su editor de código e impórtelo moment
y úselo para mostrar la hora actual en el formato del nombre del mes, día del mes, año y hora ( LLL
) usando la fr
configuració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.html
en 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:
- 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.js
y vendor.js
en 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.js
Admite 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.js
archivo 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-plugin
y usarlo para mantener la fr
configuración regional, que serán términos de fecha y hora en el idioma francés.
A continuación, deberá modificarlo angular.json
para utilizar esta nueva configuración.
Ábrelo angular.json
en tu editor de código. Dentro del architect/build
objeto, actualiza el origen builder
y agrega la clave:@angular-devkit/build-angular:browser
@angular-builders/custom-webpack:browser
customWebpackConfig
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.json
código en tu editor. Dentro del architect/serve
objeto, actualiza el builder
from @angular-devkit/build-angular:dev-server
a @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-webpack
en lugar de @angular-devkit/build-angular
y dónde buscar la configuración webpack personalizada.
Nota: Anteriormente, el @angular-builders/dev-server
paquete era obligatorio. Sin embargo, desde la versión 8, ha quedado obsoleto y @angular-builders/custom-webpack:dev-server
se debe utilizar en su lugar.
Ejecute la aplicación:
- npm start
Una vez que verifique que su aplicación funciona como se espera, tome nota de los valores de main.js
y vendor.js
en la consola.
Mirando hacia atrás, la configuración del paquete web sin modificar se generó main.js
con vendor.js
los 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.js
y :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-webpack
una 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.
Deja una respuesta