webpack介绍及angular8中webpack配置

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

什么是Webpack，
Webpack的工作原理
理解Webpack的概念，
Webpack 4的功能
在一个简单的示例中，如何使用webpack。
angular8中如何配置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的实际示例之前，让我们首先了解以下基本概念：

入口：入口点只是./src/index.jswebpack用于开始捆绑的模块或JavatScript文件（默认为）。Webpack在此模块中查找import语句，并构建所有依赖项的依赖关系图。如果不使用默认入口点即 ./src/index.js，则需要在配置文件中指定它。请注意，您的项目中可以有多个入口点。
输出：使用输出点，您可以告诉webpack文件的名称和路径，以在其中产生最终的捆绑包或捆绑包集。默认情况下，它./dist/main.js用于主捆绑包，您可以在配置文件中指定自定义值。
装载机：的WebPack利用装载机知道如何改造和捆绑其它类型的资产和文件，如它默认支持CSS，图像或打字稿代码，比JavaScript和JSON等的。
插件：Webpack可以用插件扩展，这些插件用于添加无法使用加载程序实现的功能。
模式：允许的WebPack deveopers通过使用改变其可采取任一模式参数指定为开发和生产不同的配置选项 development， production 或 none值。默认情况下，模式设置为production。有关更多信息，请查看官方文档。

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

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

Webpack 4的功能

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

性能改进和更快的构建时间（最快提高98％）
小型应用的零配置
更好的摇晃树木以获得纯净的模块而没有副作用
开发生产方式介绍
该<script async>支撑
弃用CommonsChunkPlugin赞成的optimize.splitChunksAPI
默认情况下，您可以导入和导出Web程序集（Rust，C ++，C等）
引入mode属性，该属性可以采用开发或生产选项，并且默认为生产。

使用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配置：

首先，使用命令安装@ angular-builders / custom-webpack构建器npm i -D @angular-builders/custom-webpack。在angular.json文件中，将@angular-devkit/build-angular:browser构建器与 @angular-builders/custom-webpack:browser构建器交换。
接下来，添加 customWebpackConfig 到 build目标选项：

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

}

接下来，custom-webpack.config.js在项目的文件夹中创建一个文件并指定选项。
运行 ng build。

注意：与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具有自定义配置的文件。

webpack介绍及angular8中webpack配置

什么是Webpack？

Webpack如何工作

基本的Webpack概念

Webpack 4的功能

使用Webpack

Webpack和Angular 8

如何在Angular 8中扩展Webpack配置

在Angular 8中配置Webpack

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

webpack介绍及angular8中webpack配置

什么是Webpack？

Webpack如何工作

基本的Webpack概念

Webpack 4的功能

使用Webpack

Webpack和Angular 8

如何在Angular 8中扩展Webpack配置

在Angular 8中配置Webpack

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复