Webpack 构建 Angular 项目-JavaScript中文网-JavaScript教程资源分享门户

前言

Angular 是一款前端框架，它使用 TypeScript 作为主要开发语言，在提供一些类 JQuery 库的同时还提供了一套完整的 MVC（或 MVVM）开发体系，使得前端开发变得更为简单和高效。

随着 Angular 越来越流行，Webpack 也慢慢成为了不可或缺的前端构建工具，它能够在开发过程中实现代码打包、压缩、模块化聚合等功能，等到项目打包上线时，也可以进行一系列优化以提高网站性能。

在本文中，将讲述如何利用 Webpack 构建 Angular 项目。本文将详细介绍必要的配置和步骤，并提供示例代码以供学习和参考。

准备工作

在开始之前，确保已经安装了 Node.js 和 Angular CLI 工具。

$ node --version
v13.14.0
$ npm install -g @angular/cli
$ ng version

Angular CLI: 10.1.1

初始化项目

利用 Angular CLI 工具快速创建一个新的 Angular 项目。

$ ng new my-app
$ cd my-app

此时，我们已经创建了名为 my-app 的 Angular 项目。

Webpack 配置

Angular 项目初始化后，Angular CLI 会生成一个默认的 Webpack 配置文件 webpack.config.js，但是这个配置文件不能满足所有需求，我们需要根据自己的项目需求进行一些自定义配置。

下面是一些必要的配置：

1. 添加自定义的 Webpack 配置文件

在项目根目录下，添加一个名为 webpack.extra.js 的自定义 Webpack 配置文件。

-- -------------------- ---- -------
----- ------- - -------------------

-------------- - -
  -------- -
    --- ----------------------
      -------------- -
        --------- ----------------------------
      -
    --
  -
-展开代码

2. 修改默认的 Webpack 配置文件

打开 webpack.config.js 文件，进行一些修改：

const webpackConfig = require('./webpack.config.js');
const extraConfig = require('./webpack.extra.js');
module.exports = Object.assign(webpackConfig, extraConfig);

当我们需要在自定义配置文件中添加一些插件或者修改其他配置时，只需要在 webpack.extra.js 中进行修改即可。

3. 配置 Webpack 别名

添加一个 webpack.config.json 配置文件，并在文件中配置项目目录的别名：

-- -------------------- ---- -------
-
  ---------- -
    -------- -
      ------- ------------
      ---------- ---------------
      ------- ---------------------------------
      ----------- --------------------
      ------------ ---------------------
      --------- -----------------
    -
  -
-展开代码

这样我们在项目中引入文件时，可以使用它们的别名来取代相对路径的写法，这样能够提高代码的可读性和可维护性。

Webpack 构建前端项目

1. 开发环境

在开发环境时，我们需要在 webpack.extra.js 中添加一个配置项 mode：

module.exports = {
  mode: 'development',
  // ...
}

为了提高开发效率，我们可以使用 webpack-dev-server 进行本地热更新，在 package.json 中添加一个新的脚本：

"scripts": {
  "start": "ng serve --open"
},

2. 生产环境

在生产环境时，我们需要在 webpack.extra.js 中添加一个配置项 mode：

module.exports = {
  mode: 'production',
  // ...
}

此外还需要在 package.json 中添加一个新的脚本：

"scripts": {
  "build": "ng build --prod --aot --buildOptimizer --vendorChunk --extractLicenses"
},

3. 构建优化

在生产环境中，我们需要对代码进行混淆和压缩。使用 Webpack 可以轻松地实现这些操作，使用 UglifyJS 插件即可：

-- -------------------- ---- -------
-------------- - -
  -- ---
  ------------- -
    --------- -----
    ---------- -
      --- ----------------
        ----- ----------------
      ---
    --
  --
--展开代码

此外还可以添加一些其他的构建优化配置，例如分离第三方库等。

结语

本文以 Angular 项目为例，介绍了如何使用 Webpack 进行前端项目打包和构建，以及如何优化项目性能。这些内容不仅仅适用于 Angular 项目，同样适用于其他前端框架的项目。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67bc61eea231b2b7eddf39a5

Webpack 构建 Angular 项目

前言