Webpack Build Wrapper

Common errors

• Cannot find module 'webpack-build'

  cause The `webpack-build` package is not installed or not resolvable in the current environment.
  fix npm install webpack-build

• Error: Cannot find module 'webpack' from '/path/to/node_modules/webpack-build'

  cause The `webpack` peer dependency is missing from your project's `node_modules`.
  fix npm install webpack

• TypeError: config is not a function

  cause Your Webpack configuration file (`config` option) exports a static object instead of a function.
  fix Modify your webpack config file to `module.exports = function(opts) { return { /* webpack config */ }; };`

Warnings

• gotcha This package requires `webpack` as a peer dependency. Ensure it is installed in your project, compatible with `webpack-build`'s expected version range (>= 1.9 for v1.x of `webpack-build`).
  Fix: npm install webpack@'^1.9.0' # or a compatible version for your project
• gotcha Webpack configuration files provided to `webpack-build` must export a function that accepts an `options` object, rather than a direct Webpack configuration object. This function allows dynamic configuration based on build options.
  Fix: Ensure your webpack config file starts with `module.exports = function(opts) { ... return config; };`
• gotcha The `buildHash` provided in the `data` object upon build completion is an internal identifier used by `webpack-build` for caching and HMR. It is distinct from and unrelated to any content hashes generated by Webpack itself.
  Fix: Do not confuse `data.buildHash` with Webpack's asset hashes for cache busting or content verification.
• gotcha To pass arbitrary data into your webpack configuration function, use the `context` property within the options object passed to `build()`. This data will be available on `opts.context` inside your config function.
  Fix: Pass custom data like: `build({ config: '...', context: { myData: 'value' } }, ...)`

Install

• npm install webpack-build npm
• yarn add webpack-build yarn
• pnpm add webpack-build pnpm

Imports

• build
  wrong:

  import build from 'webpack-build';

  correct:

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

  This package is CommonJS-only in its 1.x version.
• build.options.defaults
  wrong:

  import { options } from 'webpack-build';

  correct:

  const build = require('webpack-build');
  build.options.defaults = { /* ... */ };

  Configuration defaults are set directly on the 'build' object, not via named import.

Quickstart

This example demonstrates basic usage, initializing a build with a dynamic Webpack configuration file and logging the generated assets. It also sets up a simple dummy config and source file for a runnable example.

const build = require('webpack-build');
const path = require('path');
const fs = require('fs');

// Create a dummy webpack.config.js for demonstration
const configPath = path.join(__dirname, 'webpack.config.js');
const dummyConfigContent = `
module.exports = function(opts) {
  return {
    entry: './src/index.js',
    output: {
      path: opts.outputPath || path.join(__dirname, 'dist'),
      filename: 'bundle.js'
    },
    mode: 'development' // Webpack 4+ needs mode
  };
};
`;

// Create a dummy entry file
const srcDir = path.join(__dirname, 'src');
if (!fs.existsSync(srcDir)) fs.mkdirSync(srcDir);
fs.writeFileSync(path.join(srcDir, 'index.js'), 'console.log("Hello from webpack-build!");');

fs.writeFileSync(configPath, dummyConfigContent);

console.log('Starting webpack-build...');
build({
  config: configPath,
  watch: false, // Set to true to enable watching
  outputPath: path.join(__dirname, 'output'),
  context: {
    debug: true
  }
}, function(err, data) {
  if (err) {
    console.error('Build failed:', err);
    return;
  }
  console.log('Build successful!');
  console.log('Generated assets:', data.assets);
  // Clean up dummy files
  fs.unlinkSync(path.join(srcDir, 'index.js'));
  fs.rmdirSync(srcDir);
  fs.unlinkSync(configPath);
  fs.rmdirSync(path.join(__dirname, 'output'), { recursive: true });
});