Merge pull request #29 from Josh68/webpackv4beta

Documentation and configuration updates

Author: mbulfair

readme.md

@@ -110,6 +110,19 @@ To install a specific StarterKit from GitHub type:
 
 Unlike the other editions, there were a few options added just for this edition that allow for easier upgrading, and better flexibility.
 
+#### Custom Webpack Configuration and Merge Options
+
+In this edition, it's important to make the configuration for webpack something very easy to update, and very easy to modify. The current setting for webpack custom configuration and merge are described [here.](https://github.com/Comcast/patternlab-edition-node-webpack/blob/master/source/_app/readme.md)
+
+You can change how it merges by changing this object in `patternlab-config.json`:
+
+```javascript
+    "webpackMerge": {
+        "entry": "replace"
+    },
+```
+By default merge does a `append` if that option works for you only set which webpack configuration you want to change. The merge setting is: `smartStrategy` which is documented over on this [page.](https://www.npmjs.com/package/webpack-merge#mergesmartstrategy-key-prependappendreplaceconfiguration--configuration)
+
 #### Setting Webpack Dev Server
 
 You can set several options to configure your dev server. You can also in the CLI pass any option on demand.
@@ -126,27 +139,13 @@ You can set several options to configure your dev server. You can also in the CL
         }
     },
 ```
-
-#### Setting the Webpack Merge Options
-
-In this edition, it's important to make the configuration for webpack something very easy to update, and very easy to modify. The current setting for webpack merge are described [here.](https://github.com/Comcast/patternlab-edition-node-webpack/blob/master/source/_app/readme.md)
-
-You can change how it merges by changing this object in `patternlab-config.json`:
-
-```javascript
-    "webpackMerge": {
-        "entry": "replace"
-    },
-```
-By default merge does a `append` if that option works for you only set which webpack configuration you want to change. The merge setting is: `smartStrategy` which is documented over on this [page.](https://www.npmjs.com/package/webpack-merge#mergesmartstrategy-key-prependappendreplaceconfiguration--configuration)
-
 #### Modifying the compression settings for bundles
 
 You can safely modify the following settings in the the main `webpack.babel.config` that can change how the bundles get optimized.
 
 _Note: in webpack 4, these settings are automatically triggered when `mode=production` when running the dev server this is not used._
 
-All uglify settings are in the`patternlab-config.json`:
+All uglify settings are in the `patternlab-config.json`:
 
 ```javascript
     "uglify": {
@@ -167,8 +166,6 @@ This can be changed in the`patternlab-config.json` under `app`:
         "namespace": ""
     }
 ```
-
-
 ### Licenses
 * [babel-cli](https://github.com/babel/babel/blob/master/LICENSE) - MIT
 * [babel-core](https://github.com/babel/babel/blob/master/LICENSE) - MIT

source/_app/readme.md

@@ -6,7 +6,11 @@ Used to store your app specific files.
 
 **Custom Webpack Configuration**
 
-`webpack.app.js` this file is used to place your custom webpack configuration. This will merge or override the values in `webpack.config.babel.js` This will provide a way to change your configuration and still get updates in the future.
+The file `/source/_app/webpack.app.js` is your custom webpack configuration. This will merge or override the values in `webpack.config.babel.js`. This will provide a way to change your configuration and still get updates in the future.
+
+**Sample Custom Configuration**
+
+This edition includes [an example configuration](https://github.com/Comcast/patternlab-edition-node-webpack/blob/latest/source/_app/samples/scss/webpack.app.js) for loading, processing, and bundling SASS/SCSS. Use this sample as a template and modify as you like for working with any project asset-types.
 
 ### More information
 

source/_app/samples/scss/webpack.app.js

@@ -1,5 +1,6 @@
 /**
- * NOTE: THIS IS A SAMPLE, THIS SHOULD BE webpack.app.js one level higher to be used in your project.
+ * NOTE: THIS IS A SAMPLE. 
+ * Any configuration to be merged with 'webpack.config.babel.js' SHOULD BE ADDED TO '/source/_app/webpack.app.js'.
  * Add new dependencies like so:
  * "yarn add autoprefixer import-glob-loader css-loader node-sass postcss-loader postcss-flexbugs-fixes mini-css-extract-plugin sass-loader style-loader --dev"
  * or

webpack.config.babel.js

@@ -110,9 +110,8 @@ module.exports = env => {
 
               // additional watch files
               const watchFiles = [
-                `${plConfig.paths.source.patterns}**/*.json`,
-                `${plConfig.paths.source.patterns}**/*.md`,
-                `${plConfig.paths.source.data}**/*.json`,
+                `${plConfig.paths.source.patterns}**/*.(json|md|yaml|yml)`,
+                `${plConfig.paths.source.data}**/*.(json|md|yaml|yml)`,
                 `${plConfig.paths.source.fonts}**/*`,
                 `${plConfig.paths.source.images}**/*`,
                 `${plConfig.paths.source.meta}**/*`,
@@ -156,7 +155,7 @@ module.exports = env => {
         hot: true,
         watchContentBase: plConfig.app.webpackDevServer.watchContentBase,
         watchOptions: plConfig.app.webpackDevServer.watchOptions
-    },
+      },
       module: {
         rules: [
           {