webpack-focus

1.0.4 verified Sat Apr 25 auth: no javascript

Webpack-focus is a configurator that generates webpack configurations for Focus, a React-based framework. Version 1.0.4 is the current stable release, with a focus on TypeScript and React support. It uses babel-preset-focus, requiring NODE_ENV to be set to 'development', 'production', or 'test'. It provides a callback-based API to customize the generated webpack config. Compared to manual webpack setup, it abstracts common patterns for Focus projects, including hot reload, dev server, and polyfills. Release cadence is irregular; latest versions are bug fixes.

Common errors

error Error: 'something is already running on that port' ↓

cause Port conflict when running dev server with multiple instances or leftover process.

fix

Kill the existing process on that port or set a different PORT environment variable.

error Module not found: 'focus-core' ↓

cause focus-core is not installed.

fix

Run 'npm install focus-core' for the required dependency.

error Uncaught ReferenceError: __DEV__ is not defined ↓

cause The __DEV__ global variable is not set by webpack-focus if not in development mode.

fix

Set NODE_ENV to 'development' or define __DEV__ in webpack plugins manually.

Warnings

breaking NODE_ENV must be set to development, production, or test when using babel-preset-focus ↓

fix Set NODE_ENV environment variable to one of the three valid values.

breaking Legacy lodash (3.10.1) users must set LEGACY_LODASH=true ↓

fix Set environment variable LEGACY_LODASH=true if using lodash 3.10.1.

deprecated LEGACY_EXPORTS option is deprecated for ES6 projects ↓

fix Remove LEGACY_EXPORTS=true if your project uses ES6 import/export.

gotcha focus-devtools must be rendered conditionally with __DEV__ ↓

fix Wrap DevTools component in {__DEV__ && <DevTools/>} to avoid production issues.

Install

npm install webpack-focus

yarn add webpack-focus

pnpm add webpack-focus

Imports

default export
wrong
```
const webpackFocus = require('webpack-focus')
```
correct
```
import webpackFocus from 'webpack-focus'
```
CommonJS require works if the package supports it, but ESM is preferred.
getConfig
```
import { getConfig } from 'webpack-focus'
```
Named export for retrieving the final webpack config object.
mergeConfig
```
import { mergeConfig } from 'webpack-focus'
```
Named export to merge custom config with the default one.

Quickstart

Shows basic usage of webpack-focus to generate a webpack config object for a Focus application.

const webpackFocus = require('webpack-focus');
const webpackConfig = webpackFocus({
  apps: ['myApp'],
  path: './src',
  output: './dist',
  mode: 'development',
  legacy: false
});

// Config can be used directly in webpack
module.exports = webpackConfig;