From ead72c85c4a4560329ab08ade5bd946b0a1b81d1 Mon Sep 17 00:00:00 2001 From: Josh Schneider Date: Mon, 11 Jun 2018 16:42:53 -0700 Subject: [PATCH 1/6] adding yaml and globbing filename extensions for compilation fileDependencies --- webpack.config.babel.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/webpack.config.babel.js b/webpack.config.babel.js index b0db77d..b1d1951 100644 --- a/webpack.config.babel.js +++ b/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}**/*`, From 4ca490c2f739c425e0c2d41d63f556de03f24ac6 Mon Sep 17 00:00:00 2001 From: Josh Schneider Date: Tue, 12 Jun 2018 08:26:56 -0700 Subject: [PATCH 2/6] formatting --- webpack.config.babel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webpack.config.babel.js b/webpack.config.babel.js index b1d1951..70a5235 100644 --- a/webpack.config.babel.js +++ b/webpack.config.babel.js @@ -157,7 +157,7 @@ module.exports = env => { hot: true, watchContentBase: plConfig.app.webpackDevServer.watchContentBase, watchOptions: plConfig.app.webpackDevServer.watchOptions - }, + }, module: { rules: [ { From 210b690c75c73be88714c2ecea168db5646a3a92 Mon Sep 17 00:00:00 2001 From: Josh Schneider Date: Tue, 12 Jun 2018 09:34:15 -0700 Subject: [PATCH 3/6] add a start script as alias to patternlab:serve --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 9e08e5a..2761869 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "Paul Wright " ], "scripts": { + "start": "npm run patternlab:serve", "webpack:version": "webpack --v", "patternlab:build": "webpack --mode=production --env.production", "patternlab:serve": "webpack-dev-server --mode=development --env.development", From 257c0cb1525d031fb476bf9f1a392bec780b57f1 Mon Sep 17 00:00:00 2001 From: Josh Schneider Date: Tue, 12 Jun 2018 10:52:18 -0700 Subject: [PATCH 4/6] rename sample config and update instructions a bit --- source/_app/samples/{webpack.app.scss.js => webpack.app.js} | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) rename source/_app/samples/{webpack.app.scss.js => webpack.app.js} (92%) diff --git a/source/_app/samples/webpack.app.scss.js b/source/_app/samples/webpack.app.js similarity index 92% rename from source/_app/samples/webpack.app.scss.js rename to source/_app/samples/webpack.app.js index 2b8b084..5a6dc6e 100644 --- a/source/_app/samples/webpack.app.scss.js +++ b/source/_app/samples/webpack.app.js @@ -1,9 +1,9 @@ /** - * 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. Modify webpack.app.js one level higher to be used in your project. * Add new dependencies like so: - * "yarn add autoprefixer import-glob-loader css-loader node-sass postcss-loader postcss-flexbugs-fixes MiniCssExtractPlugin sass-loader style-loader --dev" + * "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 - * "npm install autoprefixer import-glob-loader css-loader node-sass postcss-loader postcss-flexbugs-fixes MiniCssExtractPlugin sass-loader style-loader --save-dev" + * "npm install autoprefixer import-glob-loader css-loader node-sass postcss-loader postcss-flexbugs-fixes mini-css-extract-plugin sass-loader style-loader --save-dev" */ From 36114bcd6a6fef788b1906cd53a37beefb239633 Mon Sep 17 00:00:00 2001 From: Josh Schneider Date: Tue, 12 Jun 2018 13:33:49 -0700 Subject: [PATCH 5/6] some updates to readmes and custom config annotation --- readme.md | 31 +++++++++++-------------- source/_app/readme.md | 6 ++++- source/_app/samples/scss/webpack.app.js | 3 ++- 3 files changed, 21 insertions(+), 19 deletions(-) diff --git a/readme.md b/readme.md index e1112bb..dc725ea 100644 --- a/readme.md +++ b/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 diff --git a/source/_app/readme.md b/source/_app/readme.md index d504105..0e5b930 100644 --- a/source/_app/readme.md +++ b/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 diff --git a/source/_app/samples/scss/webpack.app.js b/source/_app/samples/scss/webpack.app.js index d93203a..f4431c6 100644 --- a/source/_app/samples/scss/webpack.app.js +++ b/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 From 25a9f6b19ba75abd7a75c6ff68080fc9d718fbe0 Mon Sep 17 00:00:00 2001 From: Josh Schneider Date: Wed, 13 Jun 2018 06:22:10 -0700 Subject: [PATCH 6/6] remove start in package.json --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index 2761869..9e08e5a 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,6 @@ "Paul Wright " ], "scripts": { - "start": "npm run patternlab:serve", "webpack:version": "webpack --v", "patternlab:build": "webpack --mode=production --env.production", "patternlab:serve": "webpack-dev-server --mode=development --env.development",