{"id":13802687,"url":"https://github.com/ericclemmons/terse-webpack","last_synced_at":"2025-07-01T04:03:23.993Z","repository":{"id":57165624,"uuid":"55941165","full_name":"ericclemmons/terse-webpack","owner":"ericclemmons","description":"Simplified, fluent Webpack API with presets. Describe *what* your app needs, not *how*.","archived":false,"fork":false,"pushed_at":"2017-02-27T19:13:29.000Z","size":98,"stargazers_count":215,"open_issues_count":16,"forks_count":10,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-10T19:03:22.568Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ericclemmons.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-04-11T04:16:46.000Z","updated_at":"2024-01-04T16:04:08.000Z","dependencies_parsed_at":"2022-08-30T14:31:15.379Z","dependency_job_id":null,"html_url":"https://github.com/ericclemmons/terse-webpack","commit_stats":null,"previous_names":["ericclemmons/terse-js"],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericclemmons%2Fterse-webpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericclemmons%2Fterse-webpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericclemmons%2Fterse-webpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericclemmons%2Fterse-webpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ericclemmons","download_url":"https://codeload.github.com/ericclemmons/terse-webpack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243814894,"owners_count":20352036,"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-08-04T00:01:50.306Z","updated_at":"2025-03-16T10:31:37.566Z","avatar_url":"https://github.com/ericclemmons.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @terse/webpack\n\n[![Join the chat at https://gitter.im/ericclemmons/terse-webpack](https://badges.gitter.im/ericclemmons/terse-webpack.svg)](https://gitter.im/ericclemmons/terse-webpack?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\n[![travis build](https://img.shields.io/travis/ericclemmons/terse-webpack.svg)](https://travis-ci.org/ericclemmons/terse-webpack)\n[![version](https://img.shields.io/npm/v/@terse/webpack.svg)](http://npm.im/@terse/webpack)\n[![downloads](https://img.shields.io/npm/dm/@terse/webpack.svg)](http://npm-stat.com/charts.html?package=@terse/webpack)\n[![MIT License](https://img.shields.io/github/license/ericclemmons/terse-webpack.svg)](http://opensource.org/licenses/MIT)\n\n\u003e Webpack simplified in a **fluent API** with **presets** \u0026 an escape hatch so **you're not locked in**.\n\n- - -\n\n## Why?\n\n- [Webpack][webpack] is **powerful**, but **extremely complicated**\n  for newcomers to use.\n- **Merging configuration objects is exceedingly difficult** and error-prone.\n- Using Webpack on both the _server_ \u0026 _client_ is necessary once you\n  leverage Webpack's APIs (e.g. `require.context`, `require.ensure`).\n- There are **tons** of configuration pitfalls that can negatively impact\n  your build that you shouldn't have to know about.\n- It's a full-time job **keeping up-to-date** with the latest build optimizations.\n- **Most React boilerplates have similar configuration**,\n  but no abstraction for composition.\n\n## Why _Not_?\n\n- You're comfortable with Webpack configuration.\n- You consider abstraction bad (e.g. \"magic\" or \"indirection\").\n- You have to get access to the \"bare-metal\" APIs.\n- _TODO - Check Twitter for more cynical responses._\n\n## How?\n\nThis project attempts to solve these problems via:\n\n- Built on **Webpack2**, with the latest advancements.\n- **Simple, fluent API** that takes the guess-work out.\n- **Escape hatch** to copy/paste the generated, raw config.\n- Optional `.presets` for **getting started quickly**.\n- Functional reducers that you can override to customize the output.\n- **Each action creates a new config**, so you can easily compose them.\n\n**Upcoming features**:\n\n- `.presets`:\n  - `.autoinstall()` - Install missing dependencies.\n  - `.conventions()` - Default input \u0026 output sources.\n  - `.hot()` - Simplify HMR.\n  - `.offline()` - Add offline support to your app.\n  - `.react()` - Quickly get started with React.\n- `terse-webpack` CLI - Start coding without any initialization.\n- GUI - Get started on a new project with a few clicks.\n\n## Example\n\n```js\n// webpack.config.js\nmodule.exports = require(\"@terse/webpack\").api()\n  .entry(\"./src/client.js\")\n  .loader(\"babel\", \".js\", {\n    exclude: /node_modules/,\n    query: { cacheDirectory: true },\n  })\n  .modules(\"./lib\")\n  .output(\"build/client\")\n  .target(\"web\")\n  .when(\"development\", function(api) {\n    return api\n      .entry({\n        client: [\n          \"webpack-hot-middleware/client?reload=true\u0026timeout=2000\",\n          \"./src/client.js\",\n        ],\n      })\n      .plugin(\"npm-install-webpack-plugin\")\n      .plugin(\"webpack.HotModuleReplacementPlugin\")\n      .plugin(\"webpack.NoErrorsPlugin\")\n      .sourcemap(\"source-map\")\n    ;\n  })\n  .getConfig()\n;\n```\n\n1. Generates `client.js` in the build directory from `./src/client.js`.\n2. Parses `.js` files (excluding `node_modules`) with Babel.\n3. Searches `node_modules` and `./lib` for non-relative files.\n4. Outputs assets to `./build/client`.\n5. Target platform is `web` (vs. `node`).\n6. When `NODE_ENV` is `development`:\n  a. Override `client.js` to support HMR.\n  b. Add `npm-install-webpack-plugin` to auto-install missing dependencies.\n  c. Add HMR support.\n  d. Enable `source-map`-style source maps (e.g. `.map` files).\n\n\n## Dependencies\n\n_I recommend using this against the latest Node + NPM v3._\n\n- [Node](http://nodejs.org/)\n- [nvm](https://github.com/creationix/nvm)\n\n## Installation\n\n```shell\nnpm install @terse/webpack\n```\n\n## Usage\n\n_[View the example](/example)_.\n\nReplace the contents of `webpack.config.js` (and others) with:\n\n  ```js\n  module.exports = require(\"@terse/webpack\").api()\n    ...\n    .getConfig()\n  ;\n  ```\n\nIt's **crucial** to call `.getConfig()` to return the Webpack configuration.\n\nWith the **upcoming `.presets`**, it'll be as simple as:\n\n```js\nmodule.exports = require(\"@terse.webpack\").api()\n  .presets(\"autoinstall\", \"hot\", \"react\", \"offline\")\n  .target(\"web\")\n  .getConfig()\n;\n```\n\n## API\n\n- `.api([customFeatures[, customReducers]])`\n\n  \u003e Begins fluent interface, optionally accepted an array of custom features\n  \u003e and custom reducers.\n\n- `.alias(name[, pathOrName])`\n\n  \u003e Maps a package name (e.g. `react`) to another library\n  \u003e (e.g. `react-lite`) or to a path (e.g. `./node_modules/react`).\n\n- `.context(path)`\n\n  \u003e Config files are relative to this folder. (Default: `process.cwd()`)\n\n- `.env(environment)`\n\n  \u003e Overrides `NODE_ENV` (defaults to `development`) the build is for.\n\n- `.externals(...[Function, RegExp, String])`\n\n  \u003e Prevents Webpack from bundling matching resources.\n\n- `.loader(name[, extensions = \".js\"[, options]])`\n\n  \u003e Add a loader for the given extension(s) with the given settings.\n\n- `.modules(path)`\n\n  \u003e Lookup non-relative (e.g. `my-cool-lib`) modules in this folder\n  \u003e as well as `node_modules`.\n\n- `.node(options)`\n\n  \u003e Override built-in Node constants \u0026 libs (e.g. `__dirname`, `__filename`)\n\n- `.output(pathOrOptions)`\n\n  \u003e Set the output path, or specify the entire Webpack output configuration.\n\n- `.plugin(name, ...args)`\n\n  \u003e Installed automatically with the given arguments.\n\n- `.preLoader(name[, extensions = \".js\"[, options]])`\n\n  \u003e Just like `.loader`, but is ran before all other loaders.\n\n- `.sourcemap(type)`\n\n  \u003e Add a source map to the build.\n\n- `.target(runtime)`\n\n  \u003e Either `node` or `web`.\n\n- `.getConfig()`\n\n  \u003e Returns the Webpack configuration\n\n  - `.toString()`\n\n    \u003e Returns the Webpack configuration as a string.\n\n- `.getState()`\n\n  \u003e Returns the normalized configuration (prior to reducing).\n\n  - `.toString()`\n\n    \u003e Returns a string of the normalized configuraiton.\n\n### License\n\n\u003e MIT License 2016 © Eric Clemmons\n\n[webpack]: https://webpack.github.io/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fericclemmons%2Fterse-webpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fericclemmons%2Fterse-webpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fericclemmons%2Fterse-webpack/lists"}