Angular CLI: Cấu hình webpack tùy chỉnh
Angular CLI cung cấp cho ta tất cả các loại sức mạnh. Một trong những sức mạnh này là khả năng quên quá trình cấu hình webpack. Điều này rất tốt cho hầu hết các ứng dụng, nhưng nếu bạn muốn thêm chức năng webpack tùy chỉnh thì sao? Bài viết này xem xét cách ta có thể đạt được điều đó.
Ứng dụng Angular mới
Để cài đặt một cơ sở chung, ta sẽ tạo một ứng dụng Angular mới với Angular CLI:
# Install the Angular CLI globally $ npm i @angular/cli -g # Create a new Angular project with a name of your choosing && change directory $ ng new AngularCustomWebpackConfig > N > SCSS $ cd AngularCustomWebpackConfig # Open this up in VS Code and Serve $ code . && ng serve Một phụ thuộc phổ biến cho nhiều dự án là thư viện ngày - moment.js . Điều này bao gồm khả năng làm việc với các ngôn ngữ, nhưng nó bổ sung khá nhiều cho kích thước gói tổng thể.
Rất may - có một plugin webpack loại bỏ các ngôn ngữ không cần thiết. Ta sẽ sử dụng nó trong dự án này.
Sự phụ thuộc
Để sử dụng cấu hình webpack tùy chỉnh, ta cần dependencies @angular-builders/custom-webpack . Thêm nó vào dự án của bạn dưới dạng devDependency như vậy:
$ npm i @angular-builders/custom-webpack -D Sau đó, ta có thể cài đặt moment vào dự án của bạn và nhập nó vào dự án của ta :
$ npm i moment --save Cấu hình gói web tùy chỉnh
Sau đó, ta có thể tạo một cấu hình webpack tùy chỉnh tách ra bất kỳ ngôn ngữ nào mà ta không chọn giữ lại một cách cụ thể.
Bên trong folder root của dự án, hãy tạo một file mới có tên custom-webpack.config.js như sau:
const MomentLocalesPlugin = require('moment-locales-webpack-plugin'); module.exports = { plugins: [ new MomentLocalesPlugin({ localesToKeep: ['fr'] }) ] }; Điều này yêu cầu ta cài đặt moment-locales-webpack-plugin :
$ npm i moment-locales-webpack-plugin -D Thêm cái này vào angle.json
Sau đó, ta cần cấu hình angular.json để sử dụng cấu hình mới này. Bên trong đối tượng architect/build , hãy cập nhật trình builder từ @angular-devkit/build-angular:browser @angular-builders/custom-webpack:browser customWebpackConfig @angular-devkit/build-angular:browser sang @angular-devkit/build-angular:browser @angular-builders/custom-webpack:browser customWebpackConfig @angular-builders/custom-webpack:browser và thêm khóa customWebpackConfig :
"architect": { "build": { "builder": "@angular-builders/custom-webpack:browser", "options": { "customWebpackConfig": { "path": "./custom-webpack.config.js", "replaceDuplicatePlugins": true } } } } Cấu hình webpack tùy chỉnh khi sử dụng ng phục vụ
Đây là tất cả những gì ta cần làm nếu ta chỉ muốn ứng dụng cuối cùng, được xây dựng, sử dụng cấu hình webpack. Tuy nhiên, nếu ta muốn kiểm tra cấu hình này trong khi sử dụng ng serve , ta còn một việc nữa phải làm.
Cài đặt @angular-builders/dev-server web tùy chỉnh @angular-builders/dev-server server từ bên trong npm :
$ npm i @angular-builders/dev-server -D Sau đó, ta có thể cập nhật điều này bên trong serve/builder trong file angular.json :
"serve": { "builder": "@angular-builders/custom-webpack:dev-server" } Thử nghiệm
Hãy kiểm tra xem liệu điều này có hoạt động như dự định không! Đi tới app.component.ts và đặt ngôn ngữ thành fr
import { Component, OnInit } from '@angular/core'; import * as moment from 'moment' @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { currentTimeFRLocale: string; ngOnInit(): void { moment.locale('fr'); this.currentTimeFRLocale = moment().format('LLL'); } } Sau đó, ta có thể hiển thị điều này bên trong app.component.html :
<h1>{{ currentTimeFRLocale }}</h1> 
Tuyệt quá. Ta có thể xem ngày và giờ hiện tại với ngôn ngữ của fr , vì ta đã nói cụ thể moment để giữ điều này với plugin.
Hãy xóa cái này khỏi custom-webpack.config.js và chọn một ngôn ngữ khác:
module.exports = { plugins: [ new MomentLocalesPlugin({ localesToKeep: ['de'] }) ] }; Bạn cần khởi động lại ứng dụng với ng serve để ứng dụng cập nhật.
Ngôn ngữ đã biến mất khỏi gói! Bạn cũng sẽ nhận thấy rằng kích thước gói nhỏ hơn đáng kể với cấu hình bổ sung này so với khi không có.
Đây là kết quả không có cấu hình:
chunk {main} main.js, main.js.map (main) 22.6 kB [initial] [rendered] Đây là kết quả với cấu hình:
chunk {main} main.js, main.js.map (main) 10.2 kB [initial] [rendered] Các tin liên quan
