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