webpack-build 构建器

Question

基于 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 的映射。资产按文件类型分组。这些值是从staticRoot和staticUrl选项生成的
• 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.errors则data.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