[DOCS] Examples of extending webpack configuration

[johnboxall]

The PWA Kit ships with a default Webpack configuration that can be extended:

https://github.com/SalesforceCommerceCloud/pwa-kit/blob/develop/packages/pwa-kit-dev/src/configs/webpack/config.js

Generally the pattern is to define your own webpack.config.js at your project root:

// webpack.config.js
const config = require('@salesforce/pwa-kit-react-sdk/configs/webpack/config')
const [client, ssr, rendered, clientOptional, requestProcessor]

// do whatever you want with config

module.exports = config

Extending the config can be useful for adding support for alternative webpack features like the ability to directly use CSS:

// webpack.config.js
const config = require('@salesforce/pwa-kit-react-sdk/configs/webpack/config')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

config.forEach((c) => {
    c.module.rules.push({
        test: /\.(sa|sc|c)ss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
    })
    c.plugins.push(new MiniCssExtractPlugin({filename: '[name].css'}))
})

module.exports = config

It would be great if we created documentation showing how to do this for common examples.

[afraser]

@johnboxall same... looks like this might help us: #1523