{"id":18678254,"url":"https://github.com/stackr23/webpack","last_synced_at":"2025-11-07T09:30:35.437Z","repository":{"id":40511069,"uuid":"366311332","full_name":"stackr23/webpack","owner":"stackr23","description":null,"archived":false,"fork":false,"pushed_at":"2023-12-12T22:25:29.000Z","size":2493,"stargazers_count":0,"open_issues_count":6,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-27T22:44:05.689Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stackr23.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-05-11T08:33:43.000Z","updated_at":"2022-01-24T16:04:44.000Z","dependencies_parsed_at":"2022-08-09T22:30:37.565Z","dependency_job_id":null,"html_url":"https://github.com/stackr23/webpack","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackr23%2Fwebpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackr23%2Fwebpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackr23%2Fwebpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackr23%2Fwebpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stackr23","download_url":"https://codeload.github.com/stackr23/webpack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239525526,"owners_count":19653345,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-07T09:36:41.203Z","updated_at":"2025-11-07T09:30:35.393Z","avatar_url":"https://github.com/stackr23.png","language":"JavaScript","readme":"# @stackr23/webpack\n\n[![Build Status](https://travis-ci.com/stackr23/webpack.svg?token=9j4kv11sMyqyMRAPNQXm\u0026branch=master)](https://travis-ci.com/stackr23/webpack)\n[![NPM Release](https://img.shields.io/npm/v/%40stackr23%2Fwebpack.svg?style=flat)](https://www.npmjs.com/package/%40stackr23%2Fwebpack)\n[![Conventional Commits](https://img.shields.io/badge/✔-Conventional%20Commits-blue.svg)](https://conventionalcommits.org)\n[![Semantic Versioning](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-blue.svg)](https://semver.org/)\n\n\u003e **latest [CHANGELOG](https://github.com/stackr23/webpack/blob/master/CHANGELOG.md)**\n\u003e\n\u003e **ATTENTION:** All [conventional-commits](https://conventionalcommits.org) merged into master will trigger a new release!\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Constants](#constants)\n- [Features](#features)\n  - [Module Resolver](#module-resolver)\n  - [remote console](#remote-console)\n  - [errorOnUsedPort()](#erroronusedport)\n  - [Integration Tests per 'karma-webpack'](#integration-tests-per-karma-webpack)\n    - [Configuration](#configuration)\n    - [Writing Tests](#writing-tests)\n\n## Installation\n\n`npm i @stackr23/webpack`\n\n\u003e **includes all packages related to webpack:**  \n\u003e \\*-loader's, babel-presets/plugins, typescript-presets/plugins, karma-plugins + puppeteer, sass/postcss, etc.\n\n## Usage\n\n\u003e **Info:** no need to add babel config for webpack usage,  \n\u003e as it is already included in webpacks babel-loader options\n\n**node - default**\n\n```javascript\n// webpack.config.js\nmodule.exports = require('@stackr23/webpack');\n```\n\n**node - extended**\n\n```jsx\n// webpack.config.js\nconst stackr23Webpack = require('@stackr23/webpack');\n\nmodule.exports = (env, args) =\u003e {\n  const config = stackr23Webpack(env, ...args);\n  // modify config as you need\n  config.plugins.push(new MySpecialPlugin());\n  return config;\n};\n```\n\n**cli**\n\n`webpack-dev --config ./node_modules/@stackr23/webpack` or  \n`webpack-dev-server --config ./node_modules/@stackr23/webpack`\n\n**node - project types**\n\n@stackr23/webpack is able to handle different types of projects:\n\n- **react:** React with Javascript and Typescript (default)\n- **planned for future releases:**\n  - **angular:**: Angular - not available yet\n  - **react-next:** NextJs - not available yet\n\n```js\n// webpack.config.js\nconst stackr23Webpack = require('@stackr23/webpack');\n\nmodule.exports = (env) =\u003e {\n  return stackr23Webpack(env, { type: 'react' });\n};\n```\n\n## Constants\n\n**can be overwritten by ENV VARS**\n\n| name         | default  | env overwrite  |\n| ------------ | -------- | -------------- |\n| PATHS.src    | 'src'    | WEBPACK_PATH   |\n| PATHS.assets | 'assets' | WEBPACK_ASSETS |\n| PATHS.build  | 'build'  | WEBPACK_BUILD  |\n| PORT         | 8080     | PORT           |\n\n## Features\n\n### Module Resolver\n\n- **enables absolute import paths**  \n  like `import Header from 'components/Header'`\n\n- **uses '[tsconfig-paths-webpack-plugin](https://github.com/dividab/tsconfig-paths-webpack-plugin#readme)'** to resolve import paths  \n  **requires:** workspaceRoot/tsconfig.json\n- **if tsconfig.json is not present** it won't use that plugin  \n  and uses the **default resolve config**:\n\n  ```js\n    resolve: {\n      extensions: ['.jsx', '.js', '.ts', '.tsx', '.json'],\n      // paths are relative to workspace root\n      alias:      { assets: PATHS.assets },\n      modules:    [PATHS.src, 'node_modules'],\n    }\n  ```\n\n  - **if you use '/src'** you probably don't have to change anything\n  - **overwrite PATHS.src** with `WEBPACK_PATH` (see [constants](#constants))\n\n- **you can overwrite this config** to fit your projects module resolvement,  \n  if you **add 'webpack.config.resolve.js'** to your workspaceRoot  \n  _(use format of '[src/webpack.config.resolve.js](https://github.com/stackr23/webpack/blob/master/src/webpack.config.resolve.js)')_\n  - This config will also be used by '[@stackr23/config-eslint](https://github.com/stackr23/config-eslint)'\n  - for more information see [webpack's resolve config](https://webpack.js.org/configuration/resolve/)\n\n### remote console\n\n```javascript\n// on client\nimport { remoteConsoleInjector } from '@stackr23/webpack/remoteConsole';\n\nremoteConsoleInjector();\n```\n\n**all native console outputs are sent to** our endpoint of remote-console,  \nand get catched server-side to log them in **the terminal**.\n\nThe endpoint '/remote-console' is injected per webpack-dev-server's 'before' function:  \n`webpackConfig.devServer.before = stackr23Middlewares`\n\n_TODO:_ see issues #17 and #39\n\n### errorOnUsedPort()\n\nbefore exporting the config,  \n**we check if the port is free to use and throw an Error, if not.**\n\n### Integration Tests per 'karma-webpack'\n\n\u003e may be moved to own package together with cypress setup in undefined future\n\n**Usage**  \n`npm i karma --save-dev`\n`npx karma start ./node_modules/@stackr23/webpack/karma`\n\n**Explanation**  \n[Karma](https://karma-runner.github.io/latest/index.html) is a test runner for JavaScript applications with several features integrated:\n\n- **real browser instances - no fake DOM!**  \n  supports Chrome, Firefox, IE11+, Safari  \n  uses headless chrome in CI environment\n- **native webpack module bundling**  \n  '[karma-webpack](https://github.com/webpack-contrib/karma-webpack)' lets you use your projects webpack config\n- **built-in mocha runner**\n  - '[chai](https://github.com/chaijs/chai)' for unit-test assertions (expect, should, ...)\n  - '[enzyme](https://github.com/airbnb/enzyme)' for integration-tests (shallow, mount, render)\n  - '[chai-enzyme](https://github.com/producthunt/chai-enzyme)' for extended integration-tests assetions\n\n#### Configuration\n\n**karma - src/test/karma.config.js**  \ncontains karma-config: file pattern, karma plugins, browser settings, usw, ...\n\n**mocha - src/test/mocha.setup.js**  \ncontains mocha setup: configures chai-enzyme and sets up global assertion functions\n\n#### Writing Tests\n\n- **example integration tests**  \n  `/test/App.spec.js` and `/test/components/Test.spec.js`\n- **component related assertions** ➡️ '[chai-enzyme](https://github.com/producthunt/chai-enzyme)'\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstackr23%2Fwebpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstackr23%2Fwebpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstackr23%2Fwebpack/lists"}