Registry / devops / monosize-bundler-webpack

monosize-bundler-webpack

library0.3.3jsnpmunverified

The `monosize-bundler-webpack` package provides a crucial integration layer for the Monosize bundle size analysis tool, enabling it to leverage Webpack for its build and measurement processes. Currently at version 0.3.3, it facilitates deep customization of Webpack configurations directly within the `monosize.config.mjs` file, ensuring that bundle size measurements accurately reflect a project's specific build setup, including resolver aliases and loader configurations. Its core offering is the `webpackBundler` function, which accepts a callback to modify the default Webpack configuration provided by Monosize. A significant differentiator is its support for a "Batch Build Mode," which processes multiple entry points in a single Webpack build, offering 3-15x faster performance compared to traditional sequential builds. This package is part of the Microsoft Monosize project, suggesting active development, though its 0.x.x versioning implies that breaking changes may occur in minor releases.

devops

npm install monosize-bundler-webpack

github ↗package ↗

INSTALL

IMPORT

SIG · MONOSIZE-BUNDLER-W

monosize-bundler-webpack

devopsjavascriptv0.3.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

webpackBundler

✓ import webpackBundler from 'monosize-bundler-webpack';

✗ const webpackBundler = require('monosize-bundler-webpack');

The `monosize.config.mjs` file, as shown in documentation, uses ESM syntax. CommonJS `require` will result in a runtime error.

WebpackConfigFunction

✓ import type { WebpackConfigFunction } from 'monosize-bundler-webpack';

This type represents the callback function signature for customizing the Webpack configuration passed to `webpackBundler`. Useful for TypeScript users to ensure type safety in their configuration.

Configuration

✓ import type { Configuration } from 'webpack';

While not directly from `monosize-bundler-webpack`, when customizing the webpack config, developers often import Webpack's `Configuration` type for type checking the `config` argument in the callback.

This quickstart demonstrates how to integrate `monosize-bundler-webpack` into your `monosize.config.mjs` file, including basic project setup and customization of the underlying Webpack configuration for aliases and module rules.

// monosize.config.mjs import webpackBundler from 'monosize-bundler-webpack'; export default { // Define your Monosize project configuration here // For example, entry points for your fixtures: project: { name: 'my-project', fixtures: { 'main-bundle': './src/index.ts', 'utils-bundle': './src/utils/index.ts' } }, // Configure the bundler to use monosize-bundler-webpack bundler: webpackBundler(config => { // Customize the default webpack configuration provided by Monosize config.resolve.alias = { ...config.resolve.alias, '~internal': './src/internal-module.ts', }; config.module.rules.push({ test: /\.css$/, use: ['style-loader', 'css-loader'], }); // Return the modified configuration return config; }), };

Debug

Known issues

breakingAs a package in the `0.x.x` version range, `monosize-bundler-webpack` may introduce breaking changes in minor (0.x.0) or even patch (0.0.x) releases without adhering strictly to semantic versioning until it reaches `1.0.0`.

fix

Always review the release notes and migration guides when updating to a newer version to identify and address any breaking changes. Pinning exact versions or using `~` (tilde) for patch updates is recommended over `^` (caret) for minor versions during `0.x.x` development.

affects: >=0.1.0

gotchaThe `monosize.config.mjs` file, as indicated by its extension and common usage with Monosize, expects ECMAScript Module (ESM) syntax (`import`/`export`). Using CommonJS `require()` syntax within this file will lead to runtime errors.

fix

Ensure all modules within `monosize.config.mjs` and its dependencies are imported using `import ... from '...'` syntax. If you need to include CommonJS modules, consider dynamic `import()` or transpilation.

affects: >=0.1.0

gotchaBy default, Monosize uses 'Batch Build Mode' which runs a single Webpack build with multiple entry points for performance. While generally faster, complex or conflicting Webpack configurations across different fixtures might behave unexpectedly or lead to incorrect measurements in this mode.

fix

If you encounter unexpected build behavior or measurement inconsistencies, try switching to 'Sequential Mode' by running `monosize measure --build-mode=sequential`. This runs one build per fixture, which can help isolate configuration issues at the cost of build time.

affects: >=0.1.0

Errors

Common errors & fixes

SyntaxError: Cannot use import statement outside a module

Attempting to use `import` syntax in a file that Node.js is interpreting as a CommonJS module (e.g., a `.js` file without `"type": "module"` in `package.json`, or a `.cjs` file). The `monosize.config.mjs` file explicitly denotes ESM.

fix

Ensure your configuration file is named `monosize.config.mjs` to explicitly tell Node.js to interpret it as an ESM, or if using a `.js` file, ensure `"type": "module"` is set in your `package.json`.

TypeError: Cannot read properties of undefined (reading 'alias')

This error typically occurs when trying to access properties like `config.resolve.alias` on a Webpack configuration object where `resolve` or `alias` might be undefined or unexpectedly structured, possibly due to an incompatible Webpack version or an empty default configuration.

fix

Verify that your installed `webpack` version is compatible with `monosize` and `monosize-bundler-webpack`. Always check for the existence of nested properties before accessing them, e.g., `config.resolve = config.resolve || {}; config.resolve.alias = config.resolve.alias || {};`.

Module not found: Can't resolve 'monosize-bundler-webpack'

The package `monosize-bundler-webpack` is not installed or not resolvable in the current project's `node_modules`.

fix

Run `npm install monosize-bundler-webpack --save-dev` or `yarn add monosize-bundler-webpack --dev` to ensure the package is installed as a development dependency in your project.

Upgrade

Version history

0.3.3latest on npm

Audit

Dependencies

monosizerequiredThis package is an integration layer for the `monosize` tool; it expects `monosize` to be installed and configured.

webpackrequiredAs a Webpack bundler integration, it requires Webpack to be installed as a peer dependency to perform its bundling tasks.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/microsoft/monosize ↗

packagehttps://www.npmjs.com/package/monosize-bundler-webpack ↗