@jenssimon/webpack-config-sfcc

@jenssimon/webpack-config-sfcc

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:

   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

webpack.config.js

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

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,
}))

webpack.config.prod.js

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

/**
 * 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,
}))

webpack.cartridges.js

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

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

dirname

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

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

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

// ...

{
  dirname,
  // ...
}

resolver

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

Required

Just add

import { createRequire } from 'node:module'

const require = createRequire(import.meta.url)

// ...

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

entryPoint

The entrypoint of the application.

Default: index.js

pathPrefix

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/)..

sourceMap

Generate source maps for .js and .css files.

Default: false

devServer

Build Webpack config for usage with dev server.

Default: false

publicPath

TODO

hmrPath

TODO

production

Use production mode.

Default: false

preCSSExtractLoaders

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

Default: []

TODO

additionalPlugins

TODO

additionalEntries

Additional entry point configurations.

additionalPostCSSPlugins

TODO

additionalDefine

TODO

noLint

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

Default: false

onlyCartridge

TODO

projectSpecificRules

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

Default: []

alias

Aliases

Default: {}

aliasCartridges

Cartridges that needs an alias configuration.

Example:

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:

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

Aliases for app_storefront_base will be created by default.

swcTarget

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

Default: "es2019"

transformNodeModules

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

Default: []

Example:

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

allowCircularDependendies

Allow circular dependencies.

Default: false

License

MIT © 2023 Jens Simon