[FEATURE] Extend webpack

[kylegoines]

Is your feature request related to a problem? Please describe.
You should be able to extend the webpack.config.js instance of the pwa-kit-dev using webpack-merge If i currently set up a webpack.config.js, all required functionality of pwa-kit fails as it has been overwritten.

[kylegoines]

the docs describe

"The Retail React App imports readymade Webpack configurations for the client side and server side form the PWA Kit React SDK. In most cases, you don’t need to change these configurations, but if you do, you can extend the Webpack configuration in webpack.config.js."

on https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/retail-react-app.html#webpack

[vmarta]

Hi @kylegoines , what does your project's webpack.config.js look like? Does it import the original config file from pwa-kit-dev and then re-export it?

One way to extend it is something like:

const config = require('@salesforce/pwa-kit-dev/configs/webpack/config')

// Add your customizations here
const clientConfig = config.find((cnf) => cnf.name === 'client')

module.exports = config

[kylegoines]

This is amazing! thank you so much for your help - this should be added to the docs its very helpful!!!

for my exact usecase i needed to require

const config = require('pwa-kit-dev/configs/webpack/config')

but i was able to extend my alias like this now

config.forEach((cnf)=>{
    cnf.resolve.alias = {...cnf.resolve.alias, 
        '@components': path.resolve(__dirname, 'app/components/')
    }
})

thank you again :)

---

a little more context for people finding this issue later: pwa-kit doesn't expose the webpack.config out of the box. @vmarta 's solution allows you to expose a webpack.config.js at your project root, just be careful what you overwrite/extend.