Webpack 插件

插件包	@rushstack/heft-webpack4-plugin @rushstack/heft-webpack5-plugin
插件名称	webpack4-plugin 由 Webpack4Plugin.ts 实现 webpack5-plugin 由 Webpack5Plugin.ts 实现
插件配置文件	(无)
heft.json 选项	IWebpackPluginOptions (Webpack 4) IWebpackPluginOptions (Webpack 5)

此任务调用 Webpack 工具来生成应用程序捆绑包。它提供以下功能：

将多个小的 .js 文件合并成一个大的文件，以加快下载速度
通过应用各种编译器优化（如内联和死代码消除（“树形抖动”））来提高性能
通过缩短标识符、默认情况下使用 Terser 压缩器来压缩和混淆代码
将 .css 或图像等资源转换为嵌入式 JavaScript 对象

Webpack 还具有充当通用构建系统的功能，例如调用编译器或 linter，但 Heft 不以这种方式使用它。Heft 调用 TypeScript 编译器来生成中间 .js 文件，这些文件成为其他任务（如 Jest 或 Webpack）的输入。这减少了编译器传递次数，并避免了在不同上下文中（ts-loader、ts-jest 等）多次重新实现编译器优化。

heft-webpack-basic-tutorial 示例项目演示了一个使用 Webpack 和 React 的完整项目。

何时使用它

Webpack 应该用于输出为 Web 应用程序捆绑包的项目。Webpack 也可用于捆绑 Node.js 工具或服务，但这不太常见。

在这些说明中，我们假设您使用的是 Webpack 5。对于 Webpack 4，请在所有地方将 @rushstack/heft-webpack4-plugin 代替 @rushstack/heft-webpack5-plugin。它们的用法基本相同。

package.json 依赖项

使用 Webpack 的最简单方法是通过 @rushstack/heft-web-rig，它提供一个标准配置，其中包含推荐的插件和加载器集。

否则，如果您没有使用 rig，则需要将插件包添加到您的项目中

Rush
NPM

# If you are using Rush, run this shell command in your project folder:
rush add --package @rushstack/heft-webpack5-plugin --dev

# If you are using vanilla NPM, run this shell command in your project folder:
npm install @rushstack/heft-webpack5-plugin --save-dev

@rushstack/heft-webpack5-plugin 包对 webpack 具有对等依赖性。如果您没有使用 rig，则还必须添加此依赖性

Rush
NPM

# If you are using Rush, run this shell command in your project folder:
rush add --package webpack --dev

# If you are using vanilla NPM, run this shell command in your project folder:
npm install webpack --save-dev

重要提示：如果您正在使用 @rushstack/heft-web-rig，则对等依赖性将由 rig 满足，因此严格来说不需要将 webpack 添加到您项目的 package.json 依赖项中。但是，这样做可能会有用，例如满足项目特定加载器的对等依赖性。如果添加它，请确保与 rig 的 heft-web-rig/package.json 相同的 SemVer 范围，以避免不一致。

您还应该将 @types/webpack-env 添加到您的项目中，它为 Webpack 环境提供 TypeScript 类型定义

Rush
NPM

# If you are using Rush, run this shell command in your project folder:
rush add --package @types/webpack-env --exact  --dev

# Because @types packages don't follow SemVer, it's a good idea to use --exact

# If you are using vanilla NPM, run this shell command in your project folder:
npm install @types/webpack-env --save-dev --save-exact

# Because @types packages don't follow SemVer, it's a good idea to use --save-exact

配置

由于 @types/webpack-env 定义了全局 API（这些 API 不是使用常规的 import 语句访问的），因此必须将其添加到您的 TypeScript 配置中，如下所示

<项目文件夹>/tsconfig.json

{
  "extends": "./node_modules/@rushstack/heft-web-rig/profiles/library/tsconfig-base.json",
  "compilerOptions": {
    "types": [
      "webpack-env" // <---- ADD THIS
    ]
  }
}

如果 Webpack 尚未由 rig 提供，则您的 heft.json 配置文件可以像此示例一样调用它

<项目文件夹>/config/heft.json

{
  "$schema": "https://developer.microsoft.com/json-schemas/heft/v0/heft.schema.json",

  "aliasesByName": {
    "start": {
      "actionName": "build-watch",
      "defaultParameters": ["--serve"]
    }
  },

  "phasesByName": {
    "build": {
      "cleanFiles": [
        { "sourcePath": "dist" },
        { "sourcePath": "lib" },
        { "sourcePath": "lib-amd" },
        { "sourcePath": "lib-commonjs" },
        { "sourcePath": "lib-es6" }
      ],
      "tasksByName": {
        "sass": {
          "taskPlugin": {
            "pluginPackage": "@rushstack/heft-sass-plugin"
          }
        },
        "typescript": {
          "taskDependencies": ["sass"],
          "taskPlugin": {
            "pluginPackage": "@rushstack/heft-typescript-plugin"
          }
        },
        "webpack": {
          "taskDependencies": ["typescript"],
          "taskPlugin": {
            "pluginPackage": "@rushstack/heft-webpack5-plugin"
          }
        }
        . . .
      }
    },
    . . .
  }
}

接下来，在您的项目文件夹中创建一个 webpack.config.js 文件。这是一个基本的示例

<项目文件夹>/webpack.config.js

'use strict';

const path = require('path');

const webpackConfig = {
  mode: 'development',
  resolve: {
    // Note: Do not specify '.ts' or '.tsx' here.  Heft invokes Webpack as a post-process after the compiler.
    extensions: ['.js', '.jsx', '.json']
  },
  entry: {
    app: path.join(__dirname, 'lib', 'index.js')
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name]_[contenthash].js'
  }
};

module.exports = webpackConfig;

如果您希望在使用 localhost 开发服务器进行开发时使用稍微不同的配置，则可以选择创建一个名为 webpack.dev.config.js 的第二个文件。

要启动 localhost 开发服务器，请使用 heft start 命令，它通常定义为 heft build-watch --serve 的别名（请参见上面的 aliasesByName）。每当您保存对源文件的更改时，Heft 的监视模式都会重新编译您的项目，然后 Webpack 热模块重新加载应该使用应用程序的最新版本刷新您的 Web 浏览器。

与 Jest 的交互

Webpack 最适合 esnext 模块格式，而 Jest 必须使用 commonjs 模块格式，因为其测试由 Node.js 运行时执行。为了将 Webpack 和 Jest 一起使用，您需要发出两种模块格式。这在 Jest 插件部分中进行了描述。

CLI 参数

heft-jest-plugin/heft-plugin.json 定义了以下参数

  --serve
                        Start a local web server for testing purposes using
                        webpack-dev-server. This parameter is only available
                        when running in watch mode.

何时使用它​

package.json 依赖项​

配置​

与 Jest 的交互​

CLI 参数​

何时使用它

package.json 依赖项

配置

与 Jest 的交互

CLI 参数