Skip to content

jenssimon/webpack-config-sfcc

Repository files navigation

NPM version Downloads star this repo fork this repo Build Status Code Style

@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

Features

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