webpack-build 构建器

发布于 2022-04-22 12:50:50 字数 6431 浏览 1138 评论 0

基于 webpack。有没有什么有用的东西:

  • 跨多个工作人员的多个并发编译器
  • 持久缓存
  • 构建服务器
  • HMR 支持
  • 配置挂钩

安装

npm install webpack-build

基本用法

var build = require('webpack-build');

build({
  config: '/path/to/webpack.config.js',
  watch: true
}, function(err, data) {
  // ...
});

data对象包括:

  • stats: 编译器输出的子集
  • assets:生成资产的绝对路径列表
  • output:从条目到其资产的绝对路径的映射。资产按文件类型分组
  • urls:从条目到与其资产匹配的 url 的映射。资产按文件类型分组。这些值是从staticRootstaticUrl选项生成的
  • outputOptions: 编译器的输出选项
  • fileDependencies:用于生成资产的文件列表
  • buildOptions: 传入编译器的选项对象
  • buildHashbuildOptions:通过散列对象生成的唯一标识符。build在编译器、缓存和 hmr 处理程序之间传递时,在内部使用此值来标识构建。该值与 webpack 生成的哈希无关

构建选项

以下选项可以传递给build

{

  // An absolute path to a config file
  config: '',

  // Watching
  // --------

  watch: false,
  aggregateTimeout: 200,
  poll: undefined,

  // Config manipulation
  // -------------------

  outputPath: '', // override for output.path
  publicPath: '', // override for output.publicPath

  // External system integration
  // ---------------------------

  staticRoot: '', // Absolute path to your static root
  staticUrl: '', // Url to your staticRoot

  // Caching
  // -------

  cache: true,
  cacheDir: path.join(process.cwd(), '.webpack_build_cache'),

  // Hot module replacement
  // ----------------------

  hmr: false, // if true, hmr code is injected into the assets
  hmrRoot: '', // The address of the server hosting hmr sockets
  hmrPath: '/__hmr__', // the path to the hmr socket endpoint

}

上述属性表示默认值。如果要定义默认值,可以将它们绑定到build.options.defaults对象。

配置文件

配置文件应该导出一个返回配置对象的函数。

module.exports = function(opts) {
  var config = {
    entry: '...',
    output: {
      // ..
    },
    loaders: [
      // ...
    ]
  };

  if (opts.hmr) {
    config.loaders.push({
      // ...
    });
  }

  return config;
};

该函数提供了一个参数:传递给函数的选项对象build。该对象将使用所有配置标志的默认值进行更新,因此您可以根据各种构建标志来编写配置。

如果要将数据向下传递给函数,请将其放在context属性中。

build({
  config: '/path/to/file.js',
  context: {
    entry: './app.js',
    debug: true
  }
}, function(err, data) {
  // ...
});

然后,您的函数可以生成反映您的系统的配置对象。

module.exports = function(opts) {
  var config = {
    entry: opts.context.entry
    // ...
  };

  if (opts.context.debug) {
    config.devtool = '...';
  }

  return config;
};

缓存

一旦编译请求成功完成,输出将被缓存,后续请求将从内存中提供,直到编译器使其无效。为了避免 webpack 启动缓慢,缓存的输出也会写入磁盘。

缓存跟踪文件依赖项、包依赖项和发出的资产。只要缓存数据可用,就会在提供数据之前进行以下检查:

  • 根据缓存输出的开始时间检查配置文件的时间戳
  • 根据缓存输出的开始时间检查每个文件依赖项的时间戳
  • 根据用于填充缓存的版本检查 webpack 和 webpack-build 版本
  • 检查发出的资产是否存在

如果任何检查失败,请求将被传递给编译器,编译器将在完成时重新填充缓存。

如果watch设置为 true 并且缓存数据可用,请求仍将导致在后台生成编译器。尽早生成编译器使 webpack 的增量编译能够提供快速重建。

进程

工作进程允许主进程在编译期间保持响应。由于许多更流行的加载器是同步评估的,因此将编译卸载到工作线程对性能至关重要。Worker 使主进程能够专注于分配工作和处理缓存和 hmr。

要生成进程,请build.workers.spawn()在发送任何构建请求之前调用。

var build = require('webpack-build');

build.workers.spawn();

// ...

默认情况下,将产生 2 个工作进程。您还可以传入一个数字来指定进程的数量。

var os = require('os');
var build = require('webpack-build');

// Spawn a worker for every CPU core available
build.workers.spawn(os.cpus().length);

新请求按顺序分配给工作人员。重复的请求将始终发送到之前处理构建的同一个工作人员,这使得并发请求能够被批处理并从内存缓存中提供服务。

CLI 和构建服务器

有一个 CLI 接口 ,webpack-build它公开了与库交互的高级方法。

接受以下可选参数:

  • -c--config:要构建的配置文件,默认为'webpack.config.js'
  • -d--development:将属性添加context: {development: true}到传递给配置工厂的对象,默认为 false
  • -hmr--hot-module-replacement:为指定的配置打开 hmr,默认为 false
  • -pp--public-path:定义指定配置的公共路径,默认为 null
  • -wor --watch: 表示编译器应该监视文件的变化,默认为 false
  • -aor --address: 监听的地址,默认为127.0.0.1
  • -por --port: 监听的端口,默认为9009
  • -wo--workers:要使用的进程数量,默认为2
  • -s--server:是否应生成构建服务器(如果--hmr已定义,则设置为 true)
  • -vor --version: 表示库的版本

构建服务器还侦听网络请求。传入的 HTTP 请求通过以下方式路由:

  • GET: /以列出服务器状态的 HTML 文档进行响应
  • POST: /build以 JSON 格式读入选项,将其通过管道传递给build函数,并以 JSON 响应

成功的构建获得

{
  "error": null,
  "data": {
    // ..
  }
}

不成功的构建接收

{
  "error": {
    // ...
  },
  "data": null
}

根据请求在构建过程中传递的程度,响应可能有也可能没有data. 如果编译器产生错误, data.stats.errorsdata.stats.warnings.

HMR

webpack-build 包含与 webpack-dev-server 相当的 hmr 功能。一个关键的区别是它为每个构建命名了 hmr 套接字 - 使多个构建能够同时发出 hmr 信号。

var build = require('webpack-build');

build({
  config: '/path/to/webpack.config.js',
  watch: true,
  hmr: true
}, function(err, data) {
  // ...
});

当资产在前端呈现时,它们会打开构建服务器的套接字并尽可能尝试热更新。如果无法进行热更新,控制台日志将指示更新需要应用刷新。

如果您使用自己的服务器公开 HMR,则需要使用您的服务器hmrRoot地址指定选项,例如:hmrRoot: 'http://127.0.0.1:9009'.

将 hmr 套接字处理程序与 express 应用程序一起使用:

var http = require('http');
var express = require('express');
var build = require('webpack-build');

var app = express();
var server = http.Server(app);
build.hmr.addToServer(server);

调试

库的记录器尊重环境变量 DEBUG。要将详细日志公开给您的 shell,DEBUG=webpack-build:*请在您的 shell 命令之前添加。例如:DEBUG=webpack-build:* npm test

该项目使用 babel 来实现 ES5 兼容性。如果您使用库的 API 并且想要更清晰的堆栈跟踪,请打开源映射支持:

npm install source-map-support --save
require('source-map-support').install();

开发笔记

构建项目

npm run build

# or, to continually rebuild

npm run build -- --watch

运行测试

npm test

项目地址:https://github.com/markfinger/webpack-build

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

淹不死的鱼

文章 0 评论 0

zhangMack

文章 0 评论 0

爱的故事

文章 0 评论 0

linces

文章 0 评论 0

早乙女

文章 0 评论 0

鸵鸟症

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。