HardSourceWebpackPlugin 技术文档

HardSourceWebpackPlugin 技术文档

【免费下载链接】hard-source-webpack-plugin 项目地址: https://gitcode.com/gh_mirrors/ha/hard-source-webpack-plugin

1. 安装指南

1.1 使用 npm 安装

npm install --save-dev hard-source-webpack-plugin

1.2 使用 yarn 安装

yarn add --dev hard-source-webpack-plugin

2. 项目的使用说明

HardSourceWebpackPlugin 是一个用于 webpack 的插件，旨在为模块提供中间缓存步骤。为了看到效果，你需要使用此插件运行 webpack 两次：第一次构建将花费正常的时间，而第二次构建将显著加快。

2.1 基本配置

在 webpack 配置文件中引入并配置 HardSourceWebpackPlugin：

// webpack.config.js
var HardSourceWebpackPlugin = require('hard-source-webpack-plugin');

module.exports = {
  context: // ...
  entry: // ...
  output: // ...
  plugins: [
    new HardSourceWebpackPlugin()
  ]
}

2.2 可选配置

你可以选择设置 HardSource 写入和读取缓存的位置，以及确定何时创建新缓存的哈希值。

new HardSourceWebpackPlugin({
  cacheDirectory: 'node_modules/.cache/hard-source/[confighash]',
  configHash: function(webpackConfig) {
    return require('node-object-hash')({sort: false}).hash(webpackConfig);
  },
  environmentHash: {
    root: process.cwd(),
    directories: [],
    files: ['package-lock.json', 'yarn.lock'],
  },
  info: {
    mode: 'none',
    level: 'debug',
  },
  cachePrune: {
    maxAge: 2 * 24 * 60 * 60 * 1000,
    sizeThreshold: 50 * 1024 * 1024
  },
}),

3. 项目API使用文档

3.1 cacheDirectory

cacheDirectory 是缓存写入的位置。默认情况下，缓存存储在 node_modules 下的目录中，因此如果清除了 node_modules，缓存也会被清除。

3.2 configHash

configHash 用于在 webpack 启动时将 webpack 配置转换为哈希值，并用于 cacheDirectory 中以创建不同 webpack 配置的不同缓存。

3.3 environmentHash

当加载器、插件或其他动态依赖项发生变化时，hard-source 需要替换缓存以确保输出正确。environmentHash 用于确定这一点。如果哈希值与之前的构建不同，将使用新的缓存。

3.4 info

控制 hard-source 的消息量。

3.5 cachePrune

hard-source 缓存默认在 webpack 配置更改时创建。每个缓存都保存了创建构建所需的所有数据，因此它们可能会变得非常大。一旦缓存被认为“足够旧”，hard-source 将自动删除它以释放空间。

4. 项目安装方式

4.1 使用 npm 安装

npm install --save-dev hard-source-webpack-plugin

4.2 使用 yarn 安装

yarn add --dev hard-source-webpack-plugin

通过以上步骤，你可以成功安装并配置 HardSourceWebpackPlugin，从而显著提高 webpack 的构建速度。

【免费下载链接】hard-source-webpack-plugin 项目地址: https://gitcode.com/gh_mirrors/ha/hard-source-webpack-plugin