webpack-addons

Common errors

• TypeError: webpack.optimize.CommonsChunkPlugin is not a constructor

  cause Attempting to use `createCommonsChunkPlugin` with Webpack v4 or newer, where `CommonsChunkPlugin` has been removed.
  fix Remove all calls to `createCommonsChunkPlugin`. Implement code splitting using Webpack's `optimization.splitChunks` configuration instead.

• SyntaxError: Cannot use import statement outside a module

  cause Attempting to use ES module `import` syntax (`import { ... } from 'webpack-addons'`) in a CommonJS module context, or when Node.js is not configured for ESM.
  fix Replace `import` statements with CommonJS `require()` syntax, e.g., `const { parseValue } = require('webpack-addons');`. Ensure your file is treated as CommonJS (e.g., `.js` extension without `"type": "module"` in `package.json`).

Warnings

• breaking The `createCommonsChunkPlugin` utility provided by `webpack-addons` wraps Webpack's `CommonsChunkPlugin`, which was officially removed in Webpack v4. Using this utility with Webpack v4 or newer will result in an error or unexpected behavior, as the underlying plugin no longer exists. Modern Webpack uses `optimization.splitChunks` for code splitting.
  Fix: Avoid using `createCommonsChunkPlugin`. For code splitting, configure `optimization.splitChunks` directly in your webpack configuration for Webpack v4+.
• gotcha This package is CommonJS-only, relying on `require()` for module imports. It does not provide ESM exports, meaning direct `import` statements in an ES Module context will fail. This limits its compatibility in modern JavaScript projects that primarily use ESM.
  Fix: If integrating into an ESM project, consider using dynamic `import()` or a CommonJS wrapper. Best practice is to avoid this package in new ESM-first projects unless a specific, non-breaking utility is absolutely required.
• gotcha The `webpack-addons` package appears to be unmaintained, with its last known update being in 2017. This means it may not be compatible with recent versions of Node.js, `webpack-cli`, or Webpack itself, and will not receive security patches or bug fixes for new issues. Proceed with caution when integrating into current projects.
  Fix: Thoroughly test compatibility with your specific environment. For new projects, consider modern alternatives or reimplementing the necessary utility functions directly.
• gotcha The package does not ship with TypeScript type definitions. Developers using TypeScript will need to create their own declaration files (`.d.ts`) or use `any` types, leading to a loss of type safety and IDE assistance when interacting with `webpack-addons`'s utilities.
  Fix: Create a `webpack-addons.d.ts` file in your project or use a community-maintained `@types/webpack-addons` if available (though unlikely for an unmaintained package). Define interfaces for the exported functions to gain type checking benefits.

Install

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

Imports

• parseValue
  wrong:

  import { parseValue } from 'webpack-addons'; /* This package is CommonJS only */

  correct:

  const { parseValue } = require('webpack-addons');

  Use named destructuring from `require` for individual functions.
• createArrowFunction
  wrong:

  import createArrowFunction from 'webpack-addons/createArrowFunction'; /* Incorrect import path and ESM syntax */

  correct:

  const createArrowFunction = require('webpack-addons').createArrowFunction;

  Access specific utilities as properties of the main `webpack-addons` export.
• List
  wrong:

  require('webpack-addons/inquirer').List; /* Inquirer utilities are directly exported */

  correct:

  const { List } = require('webpack-addons');

  Inquirer prompt helpers like `List` are directly exported by the main package.

Quickstart

Demonstrates the use of `parseValue` for configuring webpack output, `createArrowFunction` for entry points, and the structure of an Inquirer `List` prompt utility within a simulated webpack-cli addon generator.

const { parseValue, createArrowFunction, List } = require('webpack-addons');

// Simulate a webpack-cli addon's generator context
class WebpackAddonGenerator {
  constructor() {
    this.configuration = {
      myScaffold: {
        webpackOptions: {}
      }
    };
  }

  // Example of applying utilities to webpack configuration
  applyConfiguration() {
    this.configuration.myScaffold.webpackOptions.output = {
      sourcePrefix: parseValue('\t\t')
    };
    this.configuration.myScaffold.webpackOptions.entry = createArrowFunction('src/main.js');

    console.log('Generated Webpack Output Source Prefix:', this.configuration.myScaffold.webpackOptions.output.sourcePrefix);
    console.log('Generated Webpack Entry:', this.configuration.myScaffold.webpackOptions.entry());
  }

  // Example of using an Inquirer prompt (requires actual Inquirer setup in a CLI)
  async promptUser() {
    // In a real CLI, this would be await inquirer.prompt(...)
    const entryChoice = List(
      'entryType',
      'What kind of entry do you want?',
      ['String', 'Function', 'Object']
    );
    console.log('Simulated Inquirer List prompt for entryType:', entryChoice.name, entryChoice.choices);
  }
}

const generator = new WebpackAddonGenerator();
generator.applyConfiguration();
generator.promptUser();