{"library":"monosize-bundler-webpack","title":"Monosize Webpack Bundler","description":"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install monosize-bundler-webpack"],"cli":null},"imports":["import webpackBundler from 'monosize-bundler-webpack';","import type { WebpackConfigFunction } from 'monosize-bundler-webpack';","import type { Configuration } from 'webpack';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"// monosize.config.mjs\nimport webpackBundler from 'monosize-bundler-webpack';\n\nexport default {\n  // Define your Monosize project configuration here\n  // For example, entry points for your fixtures:\n  project: {\n    name: 'my-project',\n    fixtures: {\n      'main-bundle': './src/index.ts',\n      'utils-bundle': './src/utils/index.ts'\n    }\n  },\n  // Configure the bundler to use monosize-bundler-webpack\n  bundler: webpackBundler(config => {\n    // Customize the default webpack configuration provided by Monosize\n    config.resolve.alias = {\n      ...config.resolve.alias,\n      '~internal': './src/internal-module.ts',\n    };\n    config.module.rules.push({\n      test: /\\.css$/,\n      use: ['style-loader', 'css-loader'],\n    });\n\n    // Return the modified configuration\n    return config;\n  }),\n};\n","lang":"typescript","description":"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}