Upgrade to webpack 4x

Author: Bulfair, Matt

.editorconfig

@@ -0,0 +1,11 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+tab_width = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.gitignore

@@ -59,4 +59,5 @@ typings/
 
 #compiled assets
 public
+events.json
 

package.json

@@ -1,34 +1,36 @@
 {
   "name": "edition-node-webpack",
   "description": "A pure wrapper around patternlab-node core, the default pattern engine, and supporting frontend assets.",
-  "version": "1.0.6",
+  "version": "2.0.0",
   "dependencies": {
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
-    "babel-preset-env": "^1.6.1",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.4",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-env": "^1.7.0",
+    "babel-register": "^6.26.0",
     "copy-webpack-plugin": "^4.2.3",
-    "event-hooks-webpack-plugin": "^1.0.0",
-    "globby": "^6.1.0",
-    "patternlab-node": "^2.11.0",
+    "event-hooks-webpack-plugin": "^2.0.0",
+    "globby": "^8.0.1",
+    "patternlab-node": "^2.12.0",
     "styleguidekit-assets-default": "^3.5.0",
     "styleguidekit-mustache-default": "^3.0.0",
-    "webpack": "^3.10.0",
+    "uglifyjs-webpack-plugin": "^1.2.5",
+    "webpack": "^4.8.3",
     "webpack-config-utils": "^2.3.0",
-    "webpack-merge": "^4.1.0"
+    "webpack-merge": "^4.1.2"
   },
   "repository": "[email protected]:Comcast/patternlab-edition-node-webpack.git",
   "bugs": "https://github.com/Comcast/patternlab-edition-node-webpack/issues",
   "author": "Matt Bulfair <[email protected]>",
   "contributors": [
     "Josh Schneider <[email protected]>",
-    "Rodrigo Gualberto <[email protected]>",
     "Paul Wright <[email protected]>"
   ],
   "scripts": {
-    "start": "npm run patternlab:serve",
     "webpack:version": "webpack --v",
-    "patternlab:build": "webpack --env.prod -p",
-    "patternlab:serve": "webpack-dev-server --env.dev --hot --progress --colors",
+    "patternlab:build": "webpack --mode=production --env.production",
+    "patternlab:serve": "webpack-dev-server --mode=development --env.development",
     "patternlab:version": "node patternlab.js version",
     "patternlab:help": "node patternlab.js help",
     "patternlab:patternsonly": "node patternlab.js patternsonly",
@@ -46,7 +48,6 @@
       [
         "env",
         {
-          "modules": "commonjs",
           "targets": {
             "node": "current"
           }
@@ -55,6 +56,7 @@
     ]
   },
   "devDependencies": {
-    "webpack-dev-server": "^2.9.5"
+    "webpack-cli": "^2.1.4",
+    "webpack-dev-server": "^3.1.4"
   }
 }

patternlab-config.json

@@ -2,7 +2,7 @@
   "paths": {
     "source": {
       "root": "./source/",
-      "app": "./source/_app",
+      "app": "./source/_app/",
       "patterns": "./source/_patterns/",
       "data": "./source/_data/",
       "meta": "./source/_meta/",
@@ -30,14 +30,23 @@
     "url": "http://localhost",
     "port": 3000
   },
+  "app": {
+    "uglify": {
+      "sourceMap": false,
+      "parallel": true,
+      "uglifyOptions": {
+        "mangle": false
+      }
+    },
+    "namespace": ""
+  },
   "webpackMerge": {
-    "entry":"replace"
+    "entry": "replace"
   },
-  "styleGuideExcludes": [
-  ],
+  "styleGuideExcludes": [],
   "defaultPattern": "all",
   "defaultShowPatternInfo": false,
-  "cleanPublic" : true,
+  "cleanPublic": true,
   "patternExtension": "mustache",
   "debug": false,
   "ishControlsHide": {
@@ -63,8 +72,7 @@
     "l": [800, 2600]
   },
   "patternStateCascade": ["inprogress", "inreview", "complete"],
-  "patternStates": {
-  },
+  "patternStates": {},
   "patternExportPatternPartials": [],
   "patternExportDirectory": "./pattern_exports/",
   "cacheBust": true,
@@ -77,4 +85,4 @@
   },
   "cleanOutputHtml": true,
   "exportToGraphViz": false
-}
+}

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

@@ -0,0 +1,110 @@
+/**
+ * NOTE: THIS IS A SAMPLE, THIS SHOULD BE 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"
+ * or
+ * "npm install autoprefixer import-glob-loader css-loader node-sass postcss-loader postcss-flexbugs-fixes MiniCssExtractPlugin sass-loader style-loader --save-dev"
+ */
+
+
+const webpack = require("webpack");
+const { getIfUtils } = require("webpack-config-utils");
+const { resolve } = require("path");
+const globby = require("globby");
+const plConfig = require("../../patternlab-config.json");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+module.exports = env => {
+    const { ifProduction, ifDevelopment } = getIfUtils(env);
+    const appNamespace = plConfig.app.namespace
+        ? `$ns:${plConfig.app.namespace};`
+        : ``;
+    const app = {
+        entry: {
+            "js/sample-project": globby.sync(
+                [
+                    resolve(`${plConfig.paths.source.css}scss/*.scss`),
+                    resolve(`${plConfig.paths.source.patterns}**/*.js`),
+                    "!**/*.test.js"
+                ],
+                {
+                    gitignore: true
+                }
+            ).map(function (filePath) {
+                return filePath;
+            })
+        },
+        optimization: {
+            splitChunks: {
+                cacheGroups: {
+                    vendor: {
+                        test: /node_modules/,
+                        chunks: "initial",
+                        name: "js/sample-project-vendor",
+                        priority: 10,
+                        enforce: true
+                    }
+                }
+            }
+        },
+        plugins: [
+            new MiniCssExtractPlugin({
+                filename: "[name].css",
+                disable: ifDevelopment()
+            }),
+            new webpack.DefinePlugin({
+                NAMESPACE: appNamespace
+            }),
+            new webpack.debug.ProfilingPlugin()
+        ],
+        module: {
+            rules: [
+                {
+                    test: /\.scss$/,
+                    use: [
+                        {
+                            loader: ifDevelopment(
+                                "style-loader",
+                                MiniCssExtractPlugin.loader
+                            )
+
+                        },
+                        {
+                            loader: "css-loader",
+                            options: {
+                                minimize: ifProduction()
+                            }
+                        },
+                        {
+                            loader: "postcss-loader",
+                            options: {
+                                sourceMap: ifDevelopment(),
+                                plugins: loader => [
+                                    // eslint-disable-line no-unused-vars
+                                    require("autoprefixer"),
+                                    require("postcss-flexbugs-fixes")
+                                ]
+                            }
+                        },
+                        {
+                            loader: "sass-loader",
+                            options: {
+                                precision: 3,
+                                sourceMap: ifDevelopment(),
+                                outputStyle: ifProduction(
+                                    "compressed",
+                                    "expanded"
+                                ),
+                                data: appNamespace
+                            }
+                        },
+                        {
+                            loader: "import-glob-loader"
+                        }
+                    ]
+                }
+            ]
+        }
+    };
+    return app;
+};

source/_meta/_01-foot.mustache

@@ -1,7 +1,7 @@
 <!--DO NOT REMOVE-->
   {{{ patternLabFoot }}}
 
-  <script src="../../js/pl-vendor-libraries.js?{{cacheBuster}}"></script>
+  <script src="../../js/pl-source-vendor.js?{{cacheBuster}}"></script>
   <script src="../../js/pl-source.js?{{cacheBuster}}"></script>
 
   </body>