乐趣区

webpack介绍及angular8中webpack配置

jiezi

在本教程中，我们将向 Angular 开发人员介绍 Webpack。您将了解：

我们还将看到一个在 Angular 8 中使用自定义 Webpack 配置的简单示例。

让我们开始吧！

什么是 Webpack？

根据 维基百科：

Webpack 是一个开源 JavaScript 模块捆绑程序。它的主要目的是捆绑 JavaScript 文件以供在浏览器中使用，但它也能够转换，捆绑或打包几乎任何资源或资产。Webpack 接收具有依赖性的模块，并生成代表这些模块的静态资产。它是主要用于 JavaScript 的模块捆绑器，但如果包括相应的插件，它可以转换 HTML，CSS 甚至图像之类的前端资产。

Webpack 是静态模块捆绑器，它以可在 Web 浏览器中使用的方式捆绑 JavaScript 文件。实际上，它还可以捆绑其他类型的资产，例如 CSS 和图像。

Webpack 的工作方式是遍历项目中的所有模块，并构建一个依赖关系图，该图描述了基于文件中的 import 语句如何将模块彼此关联。

借助 webpack，您可以使用模块化体系结构构建 JavaScript 应用，并且可以将所有模块（包括样式表和图像等其他类型的资产）捆绑为一个或几个捆绑包，您可以使用这些捆绑包将其包含在 HTML 文档中一个 <script> 标签。

请注意，webpack 将项目中的所有文件和资产视为模块。

Webpack 如何工作

在任何体面的前端 Web 应用程序中，您将至少具有一个或多个 HTML，CSS 和 JavaScript 文件。通常，它还可以包括其他资源，例如图像和自定义字体。

Webpack 将所有这些文件和资产视为模块，因此可以将它们捆绑到最终的捆绑包中，然后 index.html 使用诸如<script>JavaScript，<link>CSS 等标签将其包含在文件中。如果有多个 CSS 和 JS 文件依赖于彼此之间，webpack 将负责优化并将它们捆绑在一个文件中。

Webpack 不会自行决定如何捆绑这些文件，而是会使用 webpack.config.js 文件，开发人员可以在其中包含配置选项，这些选项指定如何预处理，转换和捆绑各种文件和资产，以及在何处产生最终输出。

webpack 基于配置文件，从入口文件开始构建依赖关系图，在入口文件中查找导入的模块并进行处理。对于每个模块，它还会查找任何导入的模块，并将它们添加到依赖度图中。最后，webpack 将所有模块捆绑为一个或多个捆绑。

Webpack 有一些使用前需要了解的概念，让我们一一解释。

基本的 Webpack 概念

在看到使用 webpack 的实际示例之前，让我们首先了解以下基本概念：

注意 ：Webpack 4 具有许多默认值，使您无需配置文件即可运行它，但这仅对小型学习项目有用。在现实世界的项目中，您经常需要在webpack.config.js 文件中分隔自定义配置。

Webpack 4（代号为Legato）是 Webpack 的最新版本，它为当今最受欢迎的模块捆绑器带来了许多新功能，例如更好的性能和易用性。

Webpack 4 的功能

简而言之，这些是 Webpack 4 最重要的功能：

使用 Webpack

在我们的 Webpack 教程的这一点上，我们已经了解了什么是 webpack 及其工作方式。我们还看到了 webpack 的各种概念，包括入口和输出点，加载程序，插件和模式配置选项。现在，我们准备开始在前端项目中使用 webpack。让我们通过一个简单的示例来学习如何做到这一点。

让我们从使用 npm 创建一个 Node 项目开始。打开一个新终端并运行以下命令：

$ mkdir webpack-example
$ cd webpack-example
$ npm init -y

这将 package.json 在webpack-example文件夹中创建一个文件。这是文件的内容：

{
  "name": "webpack-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {"test": "echo \"Error: no test specified\" && exit 1"},
  "keywords": [],
  "author": "",
  "license": "ISC"
}

接下来，您需要使用以下命令从 npm 安装 webpack 和 webpack-cli：

$ npm install webpack webpack-cli --save-dev

在编写本 webpack 教程时，  我们的计算机中已安装了 webpack v4.39.3 和  webpack-cli v3.3.7。

Webpack 期望在 src/index.js 文件中找到入口点，因此在项目的文件夹中，使用以下命令创建一个包含 src 文件的 index.html 文件夹：

$ mkdir src
$ cd src && touch index.js

打开 src/index.js 文件并向该 console.log() 方法添加简单调用以显示 Hello webpack！ 在网络浏览器的控制台中：

console.log("Hello webpack!");

现在，我们需要运行 webpack 来捆绑此文件。由于它已本地安装在我们的项目中，因此我们可以使用 npm 脚本来调用它。

打开 package.json 文件并添加 start 脚本，如下所示；

{
  "name": "webpack-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

现在，您可以从项目的根目录使用以下命令运行 webpack：

$ npm start

这是 webpack 的输出：

> webpack --mode development

Hash: 39cfc4a92c3a5f8688a8
Version: webpack 4.39.3
Time: 258ms
Built at: 2019-09-01 18:13:39
  Asset     Size  Chunks             Chun
main.js  3.8 KiB    main  [emitted]  main
Entrypoint main = main.js
[./src/index.js] 30 bytes {main} [built]

Webpack 已成功完成捆绑过程。如果查看项目的文件夹，则应找到包含 dist 文件的 main.js 文件夹。这是 webpack 使用的默认输出。

现在，让我们看看我们的 dist/main.js 文件是否可以在 Web 浏览器中正常工作。在项目的文件夹中，创建一个 index.html 文件：

$ touch index.html

打开文件并添加以下代码：

<!doctype html>
<html>
  <head>
    <title>Webpack example</title>
  </head>
  <body>
    <script src="dist/main.js"></script>
  </body>
</html>

接下来，使用 Web 浏览器打开或拖动 index.html 文件并检查控制台。您应该看到  Hello webpack！  消息打印在控制台中。

到目前为止，在我们的教程中，我们将 webpack 与默认选项一起使用，但是我们也可以使用 webpack.config.js 文件指定自定义配置。让我们看一个简单的用例。

以前，我们是手动创建 index.html 文件的，但这不是一个好习惯，因为我们已经对输出文件进行了硬编码，默认情况下称为 main.js。结果，如果 webpack 配置更改，则该index.html 文件可能使用无效值。

我们可以使用来处理这种情况html-webpack-plugin。回到您的终端并使用以下命令从 npm 安装它：

$ npm install html-webpack-plugin --save-dev

在撰写本 webpack 教程时，已安装html-webpack-plugin v3.2.0。

接下来，您需要将该插件添加到您的 webpack 配置文件中，因此 webpack.config.js 请使用以下命令在项目的根文件夹中创建一个   文件：

$ touch webpack.config.js

接下来打开配置文件并添加以下代码：

const HtmlWebpackPlugin = require("html-webpack-plugin");


module.exports = {
  plugins: [
    new HtmlWebpackPlugin({title: "Webpack example",}),
  ],
};

我们只需导入插件并将其添加到 plugins 数组中即可。插件可以有选择。例如，对于  html-webpack-plugin，我们可以使用 title 属性指定生成的 HTML 文件的标题。

现在，使用以下命令运行 webpack：

$ npm start

该 index.html 文件应在 dist 文件夹中生成。它具有以下内容：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack example</title>
  </head>
  <body>
  <script type="text/javascript" src="main.js"></script></body>
</html>

现在，您不必担心 index.html 手动创建文件并对捆绑包的名称进行硬编码。

现在，让我们为输入和输出属性添加自定义值，而不是使用默认值。在  webpack.config.js文件中，添加以下代码：

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
    entry: './src/main.js',
    output: {filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({title: "Webpack example",}),
    ],
};

src/index.js我们将 src/main.js 文件指定为项目的入口点，而不是默认文件。我们还将输出文件从默认 src/main.js 文件更改为 dist/[name].bundle.js。这是一个动态文件名，部分将被条目文件的名称代替，例如main 我们的情况。

在再次运行 weback 之前，请确保将 src/index.js 文件重命名为该 src/main.js 文件。现在，如果再次运行 webpack，则应该获得以下输出：

> webpack --mode development

Hash: 2175a7470f1bfcbe9808
Version: webpack 4.39.3
Time: 1171ms
Built at: 2019-09-01 21:08:31
         Asset       Size  Chunks             Chunk Names
    index.html  191 bytes          [emitted]
main.bundle.js   3.79 KiB    main  [emitted]  main
Entrypoint main = main.bundle.js
[./src/main.js] 30 bytes {main} [built]
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 b
ytes {0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 b
ytes {0} [built]
        + 2 hidden modules

在该 dist 文件夹中，您应该获得 index.html 和main.bundle.js文件。

作为 webpack 教程的回顾，我们了解了什么是 webpack 及其工作原理，并且了解了如何使用它来打包 JavaScript 代码。

我们已经了解了诸如 entry 和output属性之类的 webpack 概念，loaders以及 plugins 如何使用该 mode 属性设置开发和生产模式。

Webpack 和 Angular 8

Angular CLI 是用于 Angular 开发的官方工具，可用于创建和开发应用程序。

在 Angular 5 之前，我们有一个ng 弹出 命令，用于弹出您可以根据需要自定义的 webpack 配置。突然在 Angular CLI 6 中删除了该命令。

Angular CLI 6 在 webpack 之上提供了一个强大的 Architect API，使开发人员可以使用自定义构建器进入构建过程。

随着 Angular 8 的发布，Architect API 现在更加稳定，我们可以使用 自定义的 webpack 构建器 来提供自定义的 webpack 配置。

如何在 Angular 8 中扩展 Webpack 配置

您可以使用以下步骤扩展 Webpack 配置：

"architect": {  
  "build": {  
      "builder": "@angular-builders/custom-webpack:browser"  
      "options": {  
            "customWebpackConfig": {"path": "./custom-webpack.config.js"}    
            ...  
      }  

}

注意：与ng eject 命令不同，提供的 Webpack 配置将与原始 Angular 配置合并。

请参阅 文档 以获取该 customWebpackConfig 对象可用的选项。

在 Angular 8 中配置 Webpack

让我们开始创建一个 Angular 8 项目。打开一个新的终端并运行以下命令：

$ npx @angular/cli new exampleApp

接下来，您需要angular-builders  使用以下命令从 npm  安装该   库：

$ npm i --save-dev @angular-builders/custom-webpack

接下来，你需要更新 builder 下的性能 architect.build 和architect.serve特性如下：

{
  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {"path": "./custom.webpack.config.js"}
      }
    },
    "serve": {
      "builder": "@angular-builders/custom-webpack:dev-server",
      "options": {
        "customWebpackConfig": {"path": "./custom.webpack.config.js"}
      }
    }
  }
}

现在，如果调用 ng serve 和ng build命令，Angular CLI 将使用我们的自定义构建器。

最后，您需要提供一个 custom.webpack.config.js 具有自定义配置的文件。

退出移动版