[![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]

@jenssimon/webpack-config-sfcc

> [!WARNING]
> DEPRECATION:
> Webpack was a good tool for that job.
> But with tools like Vite available for a long time it's time for a change.

> A shareable Webpack configuration for SFCC projects

General

This 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.

Table of Contents

- @jenssimon/webpack-config-sfcc
- General
- Table of Contents
- Features
- Installation
- Webpack configuration files
- webpack.config.js
- webpack.config.prod.js
- webpack.cartridges.js
- Configuration
- dirname
- resolver
- entryPoint
- pathPrefix
- sourceMap
- devServer
- publicPath
- hmrPath
- production
- preCSSExtractLoaders
- additionalPlugins
- additionalEntries
- additionalPostCSSPlugins
- additionalDefine
- noLint
- onlyCartridge
- projectSpecificRules
- alias
- aliasCartridges
- swcTarget
- transformNodeModules
- allowCircularDependendies
- License

Features

- Webpack 5
- JavaScript and/or TypeScript
- Usage of modern JavaScript/TypeScript
- Optional support for polyfills
- Transpilation using swc
- Configuration of transpilation target via Browserslist
- SCSS and/or CSS
- Compiles SCSS using Dart Sass
- Uses PostCSS
- Autoprefixer
- postcss-preset-env
- Configuration via Browserslist
- Extraction of CSS bundles using mini-css-extract-plugin
- Source Maps
- Linting using ESLint via eslint-webpack-plugin
- Check for case-sensitive file names via case-sensitive-paths-webpack-plugin - Important for Windows and macOS environemnts
- Prevent circular module dependencies via circular-dependency-plugin
- Dev Server support
- Support for Hot Module Replacement

Installation

1. Install the package:

``sh
yarn add @jenssimon/webpack-config-sfcc --dev
`

2. Create the development webpack configuration webpack.config.js
3. Create the production webpack configuration webpack.config.prod.js

Webpack configuration files

$3

Add a webpack.config.js file in your project root. This is the configuration for the development environment.

`javascript
import { fileURLToPath } from 'node:url'
import path from 'node:path'
import { createRequire } from 'node:module'

import { generateConfiguration, DEFAULT_DEVELOPMENT } from '@jenssimon/webpack-config-sfcc'
import cartridges from './webpack.cartridges.js'

const require = createRequire(import.meta.url)
const filename = fileURLToPath(import.meta.url)
const dirname = path.dirname(filename)

export default () => Object.entries(cartridges).map(([cartridge, config]) => generateConfiguration(cartridge, {
dirname,
resolver: require.resolve,
...DEFAULT_DEVELOPMENT,
...config,
}))
`

$3

Add a webpack.config.prod.js file in your project root. This is the configuration for the production environment.

`javascript
/**
* Webpack configuration for production build.
*/
import { generateConfiguration, DEFAULT_PRODUCTION } from '@jenssimon/webpack-config-sfcc'
import cartridges from './webpack.cartridges.js'

export default (env) => Object.entries(cartridges).map(([cartridge, config]) => generateConfiguration(cartridge, {
...DEFAULT_PRODUCTION,
...config,
env,
}))
`

$3

Add a webpack.cartridges.js file in yout project root. This files contains specific additional configuration for each storefront cartridge within your project.

`javascript
export default {
app_storefront_foo: {
// special configuration for app_storefront_foo
},
app_storefront_bar: {
// special configuration for app_storefront_bar
},
}
`

Those configurations can contain additional Webpack rules, aliases, ... For more details see the configuration section.

Configuration

$3

The __dirname value of the outside webpack.config.js file.
Used to resolve paths from the package that consumes the generated Webpack configuration.

Required

Just add

`javascript
import { fileURLToPath } from 'node:url'
import path from 'node:path'

const filename = fileURLToPath(import.meta.url)
const dirname = path.dirname(filename)

// ...

{
dirname,
// ...
}
`

$3

The require.resolve function of the package that consumes the generated Webpack configuration.
Used to resolve modules.

Required

Just add

`javascript
import { createRequire } from 'node:module'

const require = createRequire(import.meta.url)

// ...

{
resolver: require.resolve,
// ...
}
`

$3

The entrypoint of the application.

Default: index.js

$3

The path prefix for the generated bundles.

Default: undefined

This is used to bundle files to another subfolder during the production build (e.g. dist/)..

$3

Generate source maps for .js and .css files.

Default: false

$3

Build Webpack config for usage with dev server.

Default: false

$3

TODO

$3

TODO

$3

Use production mode.

Default: false

$3

Loaders executed before mini-css-extract-plugin loader.

Default: []

TODO

$3

TODO

$3

Additional entry point configurations.

$3

TODO

$3

TODO

$3

Disable linting.
Useful when linting was already done before Webpack build.

Default: false

$3

TODO

$3

Additional Webpack rules (see https://webpack.js.org/configuration/module/#modulerules) used for your cartridge.

Default: []

$3

Aliases

Default: {}

$3

Cartridges that needs an alias configuration.

Example:

`javascript
aliasCartridges: [
{ alias: 'foo', cartridge: 'app_foo' },
],
`

This configuration creates the aliases foo (for JS) and foo-css (for CSS/SCSS).

You can skip the generation of the -css alias using the noStyle flag:

`javascript
aliasCartridges: [
{ alias: 'bar', cartridge: 'app_bar', noStyle: true },
],
`

Aliases for app_storefront_base will be created by default.

$3

The target environment for swc (see https://swc.rs/docs/configuring-swc#jsctarget).

Default: "es2019"

$3

Some packages from node_modules need to be transpiled. You can specify a list of packages using this option.

Default: []

Example:

`javascript
transformNodeModules: [
'lit',
'lit-element',
'lit-html',
],
`

$3

Allow circular dependencies.

Default: false`

License

MIT © 2023 Jens Simon

[npm-url]: https://www.npmjs.com/package/@jenssimon/webpack-config-sfcc
[npm-image]: https://badgen.net/npm/v/@jenssimon/webpack-config-sfcc
[npm-downloads-image]: https://badgen.net/npm/dw/@jenssimon/webpack-config-sfcc

[gh-url]: https://github.com/jenssimon/webpack-config-sfcc
[gh-stars-image]: https://badgen.net/github/stars/jenssimon/webpack-config-sfcc
[gh-forks-image]: https://badgen.net/github/forks/jenssimon/webpack-config-sfcc

[travis-url]: https://travis-ci.com/jenssimon/webpack-config-sfcc
[travis-image]: https://travis-ci.com/jenssimon/webpack-config-sfcc.svg?branch=master

[codestyle-image]: https://badgen.net/badge/code%20style/airbnb/f2a