Angular CLI:自定义webpack配置

本文介绍如何在Angular CLI项目中添加自定义Webpack配置,以删除不必要的语言环境,减少捆绑包大小。通过安装和配置相关插件,调整angular.json文件,实现了Webpack配置的自定义,并在ng serve时也能生效。
摘要由CSDN通过智能技术生成

The Angular CLI gives us all sorts of power. One of these powers is the ability to forget about the webpack configuration process. This is great for most applications, but what if you want to add custom webpack functionality? This article looks at how we can achieve just that.

Angular CLI为我们提供了各种功能。 这些功能之一就是能够忘记Webpack配置过程。 这对大多数应用程序来说非常有用,但是如果要添加自定义Webpack功能怎么办? 本文探讨了如何实现这一目标。

新角度应用 (New Angular Application)

To establish a common base, we’ll create a new Angular application with the Angular CLI:

为了建立通用基础,我们将使用Angular CLI创建一个新的Angular应用程序:

# 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

A common dependency to many projects is the date library - moment.js. This includes the ability to work with locales, but, it adds quite a bit to the overall bundle size.

对许多项目的常见依赖项是日期库moment.js 。 这包括使用语言环境的功能,但是,它大大增加了整体捆绑软件的大小。

Thankfully - there’s a webpack plugin which removes unnecessary locales. We’ll be using it in this project.

值得庆幸的是-有一个webpack插件可以删除不必要的语言环境。 我们将在本项目中使用它。

依存关系 (Dependencies)

In order to use a custom webpack config, we’ll need the

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值