README.md in shakapacker-7.0.3 vs README.md in shakapacker-7.1.0

@@ -463,30 +463,44 @@
 
 First, you don't _need_ to use Shakapacker's webpack configuration. However, the `shakapacker` NPM package provides convenient access to configuration code that reads the `config/shakapacker.yml` file which the view helpers also use. If you have your customized webpack configuration, at the minimum, you must ensure:
 
 1. Your output files go to the right directory
 2. Your output includes a manifest, via package [`webpack-assets-manifest`](https://github.com/webdeveric/webpack-assets-manifest) that maps output names (your 'packs') to the fingerprinted versions, including bundle-splitting dependencies. That's the main secret sauce of Shakapacker!
+ 
+The webpack configuration used by Shakapacker lives in `config/webpack/webpack.config.js`; this makes it easy to customize the configuration beyond what's available in `config/shakapacker.yml` by giving you complete control of the final configuration. By default, this file exports the result of `generateWebpackConfig` which handles generating a webpack configuration based on `config/shakapacker.yml`.
 
-The most practical webpack configuration is to take the default from Shakapacker and then use [webpack-merge](https://github.com/survivejs/webpack-merge) to merge your customizations with the default. For example, suppose you want to add some `resolve.extensions`:
+The easiest way to modify this config is to pass your desired customizations to `generateWebpackConfig` which will use [webpack-merge](https://github.com/survivejs/webpack-merge) to merge them with the configuration generated from `config/shakapacker.yml`:
 
 ```js
-// use the new NPM package name, `shakapacker`.
-// merge is webpack-merge from https://github.com/survivejs/webpack-merge
+// config/webpack/webpack.config.js
+const { generateWebpackConfig } = require('shakapacker')
+
+const options = {
+  resolve: {
+      extensions: ['.css', '.ts', '.tsx']
+  }
+}
+
+// This results in a new object copied from the mutable global
+module.exports = generateWebpackConfig(options)
+```
+
+The `shakapacker` package also exports the `merge` function from [webpack-merge](https://github.com/survivejs/webpack-merge) to make it easier to do more advanced customizations:
+
+```js
+// config/webpack/webpack.config.js
 const { generateWebpackConfig, merge } = require('shakapacker')
 
-const baseWebpackConfig = generateWebpackConfig()
+const webpackConfig = generateWebpackConfig()
 
 const options = {
   resolve: {
-      extensions: ['.css', '.ts', '.tsx']
+    extensions: ['.css', '.ts', '.tsx']
   }
 }
 
-// Copy the object using merge b/c the baseClientWebpackConfig is a mutable global
-// If you want to use this object for client and server rendering configurations,
-// having a new object is essential.
-module.exports = merge({}, baseWebpackConfig, options)
+module.exports = merge(options, webpackConfig)
 ```
 
 This example is based on [an example project](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/webpack.config.js)
 
 Shakapacker gives you a default configuration file `config/webpack/webpack.config.js`, which, by default, you don't need to make any changes to `config/webpack/webpack.config.js` since it's a standard production-ready configuration. However, you will probably want to customize or add a new loader by modifying the webpack configuration, as shown above.
@@ -511,16 +525,15 @@
 Then `require` this file in your `config/webpack/webpack.config.js`:
 
 ```js
 // config/webpack/webpack.config.js
 // use the new NPM package name, `shakapacker`.
-const { generateWebpackConfig, merge } = require('shakapacker')
+const { generateWebpackConfig } = require('shakapacker')
 
-const webpackConfig = generateWebpackConfig()
 const customConfig = require('./custom')
 
-module.exports = merge(webpackConfig, customConfig)
+module.exports = generateWebpackConfig(customConfig)
 ```
 
 If you need access to configs within Shakapacker's configuration, you can import them like so:
 
 ```js
@@ -614,16 +627,14 @@
 
 Then modify the webpack config to use it as a plugin:
 
 ```js
 // config/webpack/webpack.config.js
-const { generateWebpackConfig, merge } = require("shakapacker");
-
-const webpackConfig = generateWebpackConfig()
+const { generateWebpackConfig } = require("shakapacker");
 const ForkTSCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
 
-module.exports = merge(webpackConfig, {
+module.exports = generateWebpackConfig({
   plugins: [new ForkTSCheckerWebpackPlugin()],
 });
 ```
 
 #### CSS
@@ -636,20 +647,18 @@
 
 Optionally, add the `CSS` extension to webpack config for easy resolution.
 
 ```js
 // config/webpack/webpack.config.js
-const { generateWebpackConfig, merge } = require('shakapacker')
+const { generateWebpackConfig } = require('shakapacker')
 
-const webpackConfig = generateWebpackConfig()
-
 const customConfig = {
   resolve: {
     extensions: ['.css']
   }
 }
 
-module.exports = merge(webpackConfig, customConfig)
+module.exports = generateWebpackConfig(customConfig)
 ```
 
 To enable `PostCSS`, `Sass` or `Less` support, add `CSS` support first and
 then add the relevant pre-processors: