{"id":20767,"library":"webpack-focus","title":"webpack-focus","description":"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.","status":"active","version":"1.0.4","language":"javascript","source_language":"en","source_url":"https://github.com/KleeGroup/webpack-focus","tags":["javascript","focus","webpack"],"install":[{"cmd":"npm install webpack-focus","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-focus","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-focus","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core webpack bundler dependency","package":"webpack","optional":false},{"reason":"Transpilation with babel-preset-focus","package":"babel-core","optional":false},{"reason":"Required by the Focus framework","package":"focus-core","optional":false}],"imports":[{"note":"CommonJS require works if the package supports it, but ESM is preferred.","wrong":"const webpackFocus = require('webpack-focus')","symbol":"default export","correct":"import webpackFocus from 'webpack-focus'"},{"note":"Named export for retrieving the final webpack config object.","wrong":null,"symbol":"getConfig","correct":"import { getConfig } from 'webpack-focus'"},{"note":"Named export to merge custom config with the default one.","wrong":null,"symbol":"mergeConfig","correct":"import { mergeConfig } from 'webpack-focus'"}],"quickstart":{"code":"const webpackFocus = require('webpack-focus');\nconst webpackConfig = webpackFocus({\n  apps: ['myApp'],\n  path: './src',\n  output: './dist',\n  mode: 'development',\n  legacy: false\n});\n\n// Config can be used directly in webpack\nmodule.exports = webpackConfig;","lang":"javascript","description":"Shows basic usage of webpack-focus to generate a webpack config object for a Focus application."},"warnings":[{"fix":"Set NODE_ENV environment variable to one of the three valid values.","message":"NODE_ENV must be set to development, production, or test when using babel-preset-focus","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Set environment variable LEGACY_LODASH=true if using lodash 3.10.1.","message":"Legacy lodash (3.10.1) users must set LEGACY_LODASH=true","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Remove LEGACY_EXPORTS=true if your project uses ES6 import/export.","message":"LEGACY_EXPORTS option is deprecated for ES6 projects","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Wrap DevTools component in {__DEV__ && <DevTools/>} to avoid production issues.","message":"focus-devtools must be rendered conditionally with __DEV__","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Kill the existing process on that port or set a different PORT environment variable.","cause":"Port conflict when running dev server with multiple instances or leftover process.","error":"Error: 'something is already running on that port'"},{"fix":"Run 'npm install focus-core' for the required dependency.","cause":"focus-core is not installed.","error":"Module not found: 'focus-core'"},{"fix":"Set NODE_ENV to 'development' or define __DEV__ in webpack plugins manually.","cause":"The __DEV__ global variable is not set by webpack-focus if not in development mode.","error":"Uncaught ReferenceError: __DEV__ is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}