{"id":21191023,"url":"https://github.com/jenssimon/webpack-config-sfcc","last_synced_at":"2026-04-03T07:03:20.787Z","repository":{"id":97588856,"uuid":"575151412","full_name":"jenssimon/webpack-config-sfcc","owner":"jenssimon","description":"A shareable Webpack configuration for SFCC projects","archived":false,"fork":false,"pushed_at":"2026-03-11T03:05:42.000Z","size":264636,"stargazers_count":4,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-11T04:10:44.118Z","etag":null,"topics":["commercecloud","salesforce","sfcc","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/jenssimon.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-12-06T21:45:17.000Z","updated_at":"2026-03-10T22:51:29.000Z","dependencies_parsed_at":"2024-03-16T21:54:24.239Z","dependency_job_id":"a5f36087-fb4e-49a9-ab35-5eb36987ad1e","html_url":"https://github.com/jenssimon/webpack-config-sfcc","commit_stats":null,"previous_names":[],"tags_count":170,"template":false,"template_full_name":null,"purl":"pkg:github/jenssimon/webpack-config-sfcc","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jenssimon%2Fwebpack-config-sfcc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jenssimon%2Fwebpack-config-sfcc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jenssimon%2Fwebpack-config-sfcc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jenssimon%2Fwebpack-config-sfcc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jenssimon","download_url":"https://codeload.github.com/jenssimon/webpack-config-sfcc/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jenssimon%2Fwebpack-config-sfcc/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30373514,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-11T06:09:32.197Z","status":"ssl_error","status_checked_at":"2026-03-11T06:09:17.086Z","response_time":84,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["commercecloud","salesforce","sfcc","webpack"],"created_at":"2024-11-20T19:01:19.336Z","updated_at":"2026-03-11T07:02:49.645Z","avatar_url":"https://github.com/jenssimon.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![NPM version][npm-image]][npm-url] [![Downloads][npm-downloads-image]][npm-url] [![star this repo][gh-stars-image]][gh-url] [![fork this repo][gh-forks-image]][gh-url] [![Build Status][travis-image]][travis-url] ![Code Style][codestyle-image]\n\n# @jenssimon/webpack-config-sfcc\n\n\u003e [!WARNING]\n\u003e **DEPRECATION:**\n\u003e Webpack was a good tool for that job.\n\u003e But with tools like [Vite](https://vite.dev/) available for a long time it's time for a change.\n\n\u003e A shareable Webpack configuration for SFCC projects\n\n## General\n\nThis is a battle-proof Webpack configuration used and matured in multiple Salesforce Commerce Cloud storefront projects. To make these configurations shareable and maintainable this package was created.\n\n## Table of Contents\n\n- [@jenssimon/webpack-config-sfcc](#jenssimonwebpack-config-sfcc)\n  - [General](#general)\n  - [Table of Contents](#table-of-contents)\n  - [Features](#features)\n  - [Installation](#installation)\n  - [Webpack configuration files](#webpack-configuration-files)\n    - [`webpack.config.js`](#webpackconfigjs)\n    - [`webpack.config.prod.js`](#webpackconfigprodjs)\n    - [`webpack.cartridges.js`](#webpackcartridgesjs)\n  - [Configuration](#configuration)\n    - [dirname](#dirname)\n    - [resolver](#resolver)\n    - [entryPoint](#entrypoint)\n    - [pathPrefix](#pathprefix)\n    - [sourceMap](#sourcemap)\n    - [devServer](#devserver)\n    - [publicPath](#publicpath)\n    - [hmrPath](#hmrpath)\n    - [production](#production)\n    - [preCSSExtractLoaders](#precssextractloaders)\n    - [additionalPlugins](#additionalplugins)\n    - [additionalEntries](#additionalentries)\n    - [additionalPostCSSPlugins](#additionalpostcssplugins)\n    - [additionalDefine](#additionaldefine)\n    - [noLint](#nolint)\n    - [onlyCartridge](#onlycartridge)\n    - [projectSpecificRules](#projectspecificrules)\n    - [alias](#alias)\n    - [aliasCartridges](#aliascartridges)\n    - [swcTarget](#swctarget)\n    - [transformNodeModules](#transformnodemodules)\n    - [allowCircularDependendies](#allowcirculardependendies)\n  - [License](#license)\n\n## Features\n\n- Webpack 5\n- JavaScript and/or TypeScript\n  - Usage of modern JavaScript/TypeScript\n  - Optional support for polyfills\n  - Transpilation using [swc](https://swc.rs/)\n  - Configuration of transpilation target via [Browserslist](https://github.com/browserslist/browserslist#readme)\n- SCSS and/or CSS\n  - Compiles SCSS using [Dart Sass](https://sass-lang.com/dart-sass)\n  - Uses [PostCSS](https://postcss.org/)\n    - [Autoprefixer](https://github.com/postcss/autoprefixer#readme)\n    - [postcss-preset-env](https://preset-env.cssdb.org/)\n    - Configuration via [Browserslist](https://github.com/browserslist/browserslist#readme)\n    - Extraction of CSS bundles using [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin#readme)\n- Source Maps\n- Linting using [ESLint](https://eslint.org/) via [eslint-webpack-plugin](https://github.com/webpack-contrib/eslint-webpack-plugin#readme)\n- Check for case-sensitive file names via [case-sensitive-paths-webpack-plugin](https://github.com/Urthen/case-sensitive-paths-webpack-plugin#readme) - Important for Windows and macOS environemnts\n- Prevent circular module dependencies via [circular-dependency-plugin](https://github.com/aackerman/circular-dependency-plugin#readme)\n- Dev Server support\n- Support for Hot Module Replacement\n\n## Installation\n\n1. Install the package:\n\n    ```sh\n    yarn add @jenssimon/webpack-config-sfcc --dev\n    ```\n\n2. Create the development webpack configuration `webpack.config.js`\n3. Create the production webpack configuration `webpack.config.prod.js`\n\n## Webpack configuration files\n\n### `webpack.config.js`\n\nAdd a `webpack.config.js` file in your project root. This is the configuration for the development environment.\n\n```javascript\nimport { fileURLToPath } from 'node:url'\nimport path from 'node:path'\nimport { createRequire } from 'node:module'\n\nimport { generateConfiguration, DEFAULT_DEVELOPMENT } from '@jenssimon/webpack-config-sfcc'\nimport cartridges from './webpack.cartridges.js'\n\nconst require = createRequire(import.meta.url)\nconst filename = fileURLToPath(import.meta.url)\nconst dirname = path.dirname(filename)\n\nexport default () =\u003e Object.entries(cartridges).map(([cartridge, config]) =\u003e generateConfiguration(cartridge, {\n  dirname,\n  resolver: require.resolve,\n  ...DEFAULT_DEVELOPMENT,\n  ...config,\n}))\n```\n\n### `webpack.config.prod.js`\n\nAdd a `webpack.config.prod.js` file in your project root. This is the configuration for the production environment.\n\n```javascript\n/**\n * Webpack configuration for production build.\n */\nimport { generateConfiguration, DEFAULT_PRODUCTION } from '@jenssimon/webpack-config-sfcc'\nimport cartridges from './webpack.cartridges.js'\n\nexport default (env) =\u003e Object.entries(cartridges).map(([cartridge, config]) =\u003e generateConfiguration(cartridge, {\n  ...DEFAULT_PRODUCTION,\n  ...config,\n  env,\n}))\n```\n\n### `webpack.cartridges.js`\n\nAdd a `webpack.cartridges.js` file in yout project root. This files contains specific additional configuration for each storefront cartridge within your project.\n\n```javascript\nexport default {\n  app_storefront_foo: {\n    // special configuration for `app_storefront_foo`\n  },\n  app_storefront_bar: {\n    // special configuration for `app_storefront_bar`\n  },\n}\n```\n\nThose configurations can contain additional Webpack rules, aliases, ... For more details see the configuration section.\n\n## Configuration\n\n### dirname\n\nThe `__dirname` value of the outside `webpack.config.js` file.\nUsed to resolve paths from the package that consumes the generated Webpack configuration.\n\nRequired\n\nJust add\n\n```javascript\nimport { fileURLToPath } from 'node:url'\nimport path from 'node:path'\n\nconst filename = fileURLToPath(import.meta.url)\nconst dirname = path.dirname(filename)\n\n// ...\n\n{\n  dirname,\n  // ...\n}\n```\n\n### resolver\n\nThe `require.resolve` function of the package that consumes the generated Webpack configuration.\nUsed to resolve modules.\n\nRequired\n\nJust add\n\n```javascript\nimport { createRequire } from 'node:module'\n\nconst require = createRequire(import.meta.url)\n\n// ...\n\n{\n  resolver: require.resolve,\n  // ...\n}\n```\n\n### entryPoint\n\nThe entrypoint of the application.\n\nDefault: `index.js`\n\n### pathPrefix\n\nThe path prefix for the generated bundles.\n\nDefault: `undefined`\n\nThis is used to bundle files to another subfolder during the production build (e.g. `dist/`)..\n\n### sourceMap\n\nGenerate source maps for `.js` and `.css` files.\n\nDefault: `false`\n\n### devServer\n\nBuild Webpack config for usage with dev server.\n\nDefault: `false`\n\n### publicPath\n\nTODO\n\n### hmrPath\n\nTODO\n\n### production\n\nUse production mode.\n\nDefault: `false`\n\n### preCSSExtractLoaders\n\nLoaders executed before `mini-css-extract-plugin` loader.\n\nDefault: `[]`\n\nTODO\n\n### additionalPlugins\n\nTODO\n\n### additionalEntries\n\nAdditional entry point configurations.\n\n### additionalPostCSSPlugins\n\nTODO\n\n### additionalDefine\n\nTODO\n\n### noLint\n\nDisable linting.\nUseful when linting was already done before Webpack build.\n\nDefault: `false`\n\n### onlyCartridge\n\nTODO\n\n### projectSpecificRules\n\nAdditional Webpack rules (see https://webpack.js.org/configuration/module/#modulerules) used for your cartridge.\n\nDefault: `[]`\n\n### alias\n\nAliases\n\nDefault: `{}`\n\n### aliasCartridges\n\nCartridges that needs an alias configuration.\n\nExample:\n\n```javascript\naliasCartridges: [\n  { alias: 'foo', cartridge: 'app_foo' },\n],\n```\n\nThis configuration creates the aliases `foo` (for JS) and `foo-css` (for CSS/SCSS).\n\nYou can skip the generation of the `-css` alias using the `noStyle` flag:\n\n```javascript\naliasCartridges: [\n  { alias: 'bar', cartridge: 'app_bar', noStyle: true },\n],\n```\n\nAliases for `app_storefront_base` will be created by default.\n\n### swcTarget\n\nThe target environment for swc (see https://swc.rs/docs/configuring-swc#jsctarget).\n\nDefault: `\"es2019\"`\n\n### transformNodeModules\n\nSome packages from `node_modules` need to be transpiled. You can specify a list of packages using this option.\n\nDefault: `[]`\n\nExample:\n\n```javascript\ntransformNodeModules: [\n  'lit',\n  'lit-element',\n  'lit-html',\n],\n```\n\n### allowCircularDependendies\n\nAllow circular dependencies.\n\nDefault: `false`\n\n## License\n\nMIT © 2023 [Jens Simon](https://github.com/jenssimon)\n\n[npm-url]: https://www.npmjs.com/package/@jenssimon/webpack-config-sfcc\n[npm-image]: https://badgen.net/npm/v/@jenssimon/webpack-config-sfcc\n[npm-downloads-image]: https://badgen.net/npm/dw/@jenssimon/webpack-config-sfcc\n\n[gh-url]: https://github.com/jenssimon/webpack-config-sfcc\n[gh-stars-image]: https://badgen.net/github/stars/jenssimon/webpack-config-sfcc\n[gh-forks-image]: https://badgen.net/github/forks/jenssimon/webpack-config-sfcc\n\n[travis-url]: https://travis-ci.com/jenssimon/webpack-config-sfcc\n[travis-image]: https://travis-ci.com/jenssimon/webpack-config-sfcc.svg?branch=master\n\n[codestyle-image]: https://badgen.net/badge/code%20style/airbnb/f2a\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjenssimon%2Fwebpack-config-sfcc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjenssimon%2Fwebpack-config-sfcc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjenssimon%2Fwebpack-config-sfcc/lists"}