Upgraded to webpack 4 (#941)

* Upgrade to webpack 4 - partly working

* Upgraded to webpack 4

* Fixed error with webpack ProvidePlugin

* Fixed ESLint errors

.babelrc

@@ -1,17 +1,12 @@
 {
   "presets": [
-    ["env", {
+    ["@babel/preset-env", {
       "loose": true,
-      "target": {
+      "targets": " > 1%, last 2 versions"
-        "browsers": [
-          "> 1%",
-          "last 2 versions"
-        ]
-      }
     }]
   ],
   "plugins": [
-    ["transform-react-jsx", {
+    ["@babel/plugin-transform-react-jsx", {
       "pragma": "JSX.createElement"
     }]
   ]

.eslintrc

@@ -60,7 +60,7 @@
     "eqeqeq": 2,
     "func-call-spacing": 2,
     "func-names": [2, "never"],
-    "func-style": 2,
+    "func-style": 0,
     "generator-star-spacing": 2,
     "indent": [2, 2, {
       "FunctionDeclaration": {

Makefile

@@ -34,7 +34,7 @@ node_modules:
 
 # Build theme for distribution with Webpack
 material: $(shell find src) .babelrc webpack.config.js
-	$(shell npm bin)/webpack --env.prod
+	$(shell npm bin)/webpack --mode production
 
 # -----------------------------------------------------------------------------
 # Rules

material/base.html

@@ -48,7 +48,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/application.11e41852.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/application.572ca0f0.css' | url }}">
       {% if palette.primary or palette.accent %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/application-palette.22915126.css' | url }}">
       {% endif %}
@@ -61,7 +61,7 @@
       {% endif %}
     {% endblock %}
     {% block libs %}
-      <script src="{{ 'assets/javascripts/modernizr.20ef595d.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/modernizr.8c900955.js' | url }}"></script>
     {% endblock %}
     {% block fonts %}
       {% if font != false %}
@@ -180,7 +180,7 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/application.905597d0.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/application.8994c97c.js' | url }}"></script>
       {% if lang.t("search.language") != "en" %}
         {% set languages = lang.t("search.language").split(",") %}
         {% if languages | length and languages[0] != "" %}

package.json

@@ -31,29 +31,29 @@
   },
   "dependencies": {},
   "devDependencies": {
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.2.2",
+    "@babel/plugin-transform-react-jsx": "^7.2.0",
+    "@babel/preset-env": "^7.2.3",
     "autoprefixer": "^9.4.3",
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.25.0",
     "babel-eslint": "^10.0.0",
-    "babel-loader": "^7.1.1",
+    "babel-loader": "^8.0.4",
     "babel-plugin-add-module-exports": "^1.0.0",
-    "babel-plugin-transform-react-jsx": "^6.24.1",
-    "babel-preset-env": "^1.6.1",
     "chalk": "^2.0.1",
     "clipboard": "^2.0.0",
     "copy-webpack-plugin": "^4.2.1",
-    "css-loader": "^1.0.0",
+    "css-loader": "^2.1.0",
     "css-mqpacker": "^7.0.0",
     "cssmin": "^0.4.3",
     "custom-event-polyfill": "^1.0.6",
     "customizr": "^1.0.0-alpha",
     "escape-string-regexp": "^1.0.5",
     "eslint": "^5.11.1",
-    "event-hooks-webpack-plugin": "^1.0.0",
+    "event-hooks-webpack-plugin": "^2.1.1",
     "expose-loader": "^0.7.4",
-    "extract-text-webpack-plugin": "^3.0.2",
+    "extract-loader": "^3.1.0",
     "fastclick": "^1.0.6",
-    "file-loader": "^2.0.0",
+    "file-loader": "^3.0.1",
     "git-hooks": "^1.1.8",
     "html-minifier": "^3.5.6",
     "imagemin-webpack-plugin": "^2.0.0",
@@ -62,9 +62,11 @@
     "lunr-languages": "^1.0.0",
     "material-design-color": "^2.3.2",
     "material-shadows": "^3.0.1",
+    "mini-css-extract-plugin": "^0.5.0",
     "modernizr-auto-loader": "^0.1.0",
     "modularscale-sass": "^3.0.3",
     "node-sass": "^4.11.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
     "postcss-loader": "^3.0.0",
     "promise-polyfill": "^8.0.0",
     "sass-loader": "^7.1.0",
@@ -73,9 +75,10 @@
     "stylelint-config-standard": "^18.0.0",
     "stylelint-order": "^2.0.0",
     "stylelint-scss": "^3.4.4",
-    "uglify-js": "^3.1.10",
+    "uglifyjs-3-webpack-plugin": "^1.2.4",
     "unfetch": "^3.0.0",
-    "webpack": "^3.4.1",
+    "webpack": "^4.28.2",
+    "webpack-cli": "^3.1.2",
     "webpack-manifest-plugin": "^2.0.4"
   },
   "engines": {

src/assets/javascripts/providers/.babelrc

@@ -1,13 +1,8 @@
 {
   "presets": [
-    ["env", {
+    ["@babel/preset-env", {
       "loose": true,
-      "target": {
+      "targets": " > 1%, last 2 versions"
-        "browsers": [
-          "> 1%",
-          "last 2 versions"
-        ]
-      }
     }]
   ],
   "plugins": [

src/assets/javascripts/providers/jsx.js

@@ -25,52 +25,50 @@
  * ------------------------------------------------------------------------- */
 
 /* eslint-disable no-underscore-dangle */
-export default /* JSX */ {
 
-  /**
+/**
-   * Create a native DOM node from JSX's intermediate representation
+ * Create a native DOM node from JSX's intermediate representation
-   *
+ *
-   * @param {string} tag - Tag name
+ * @param {string} tag - Tag name
-   * @param {?Object} properties - Properties
+ * @param {?Object} properties - Properties
-   * @param {Array<string | number | { __html: string } | Array<HTMLElement>>}
+ * @param {Array<string | number | { __html: string } | Array<HTMLElement>>}
-   *   children - Child nodes
+ *   children - Child nodes
-   * @return {HTMLElement} Native DOM node
+ * @return {HTMLElement} Native DOM node
-   */
+ */
-  createElement(tag, properties, ...children) {
+export function createElement(tag, properties, ...children) {
-    const el = document.createElement(tag)
+  const el = document.createElement(tag)
 
-    /* Set all properties */
+  /* Set all properties */
-    if (properties)
+  if (properties)
-      Array.prototype.forEach.call(Object.keys(properties), attr => {
+    Array.prototype.forEach.call(Object.keys(properties), attr => {
-        el.setAttribute(attr, properties[attr])
+      el.setAttribute(attr, properties[attr])
-      })
+    })
 
-    /* Iterate child nodes */
+  /* Iterate child nodes */
-    const iterateChildNodes = nodes => {
+  const iterateChildNodes = nodes => {
-      Array.prototype.forEach.call(nodes, node => {
+    Array.prototype.forEach.call(nodes, node => {
 
-        /* Directly append text content */
+      /* Directly append text content */
-        if (typeof node === "string" ||
+      if (typeof node === "string" ||
-            typeof node === "number") {
+          typeof node === "number") {
-          el.textContent += node
+        el.textContent += node
 
-        /* Recurse, if we got an array */
+      /* Recurse, if we got an array */
-        } else if (Array.isArray(node)) {
+      } else if (Array.isArray(node)) {
-          iterateChildNodes(node)
+        iterateChildNodes(node)
 
-        /* Append raw HTML */
+      /* Append raw HTML */
-        } else if (typeof node.__html !== "undefined") {
+      } else if (typeof node.__html !== "undefined") {
-          el.innerHTML += node.__html
+        el.innerHTML += node.__html
 
-        /* Append regular nodes */
+      /* Append regular nodes */
-        } else if (node instanceof Node) {
+      } else if (node instanceof Node) {
-          el.appendChild(node)
+        el.appendChild(node)
-        }
+      }
-      })
+    })
-    }
-
-    /* Iterate child nodes and return element */
-    iterateChildNodes(children)
-    return el
   }
+
+  /* Iterate child nodes and return element */
+  iterateChildNodes(children)
+  return el
 }

webpack.config.js

@@ -33,7 +33,9 @@ const webpack = require("webpack")
 
 const CopyPlugin = require("copy-webpack-plugin")
 const EventHooksPlugin = require("event-hooks-webpack-plugin")
-const ExtractTextPlugin = require("extract-text-webpack-plugin")
+const { CallbackTask } = require("event-hooks-webpack-plugin/lib/tasks")
+const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")
+const UglifyJsPlugin = require("uglifyjs-3-webpack-plugin")
 const ImageminPlugin = require("imagemin-webpack-plugin").default
 const ManifestPlugin = require("webpack-manifest-plugin")
 
@@ -41,8 +43,9 @@ const ManifestPlugin = require("webpack-manifest-plugin")
  * Configuration
  * ------------------------------------------------------------------------- */
 
-module.exports = env => { // eslint-disable-line complexity
+module.exports = (_env, args) => { // eslint-disable-line complexity
   const config = {
+    mode: args.mode,
 
     /* Entrypoints */
     entry: {
@@ -75,11 +78,58 @@ module.exports = env => { // eslint-disable-line complexity
           use: "modernizr-auto-loader"
         },
 
+        /* SASS stylesheets */
+        {
+          test: /\.scss$/,
+          use: [
+            {
+              loader: "file-loader",
+              options: {
+                name: `[name]${
+                  args.mode === "production" ? ".[md5:hash:hex:8]" : ""
+                }.css`,
+                outputPath: "assets/stylesheets",
+                publicPath: path.resolve(__dirname, "material")
+              }
+            },
+            "extract-loader",
+            {
+              loader: "css-loader",
+              options: {
+                sourceMap: args.mode !== "production"
+              }
+            },
+            {
+              loader: "postcss-loader",
+              options: {
+                ident: "postcss",
+                plugins: () => [
+                  require("autoprefixer")(),
+                  require("css-mqpacker")
+                ],
+                sourceMap: args.mode !== "production"
+              }
+            },
+            {
+              loader: "sass-loader",
+              options: {
+                includePaths: [
+                  "node_modules/modularscale-sass/stylesheets",
+                  "node_modules/material-design-color",
+                  "node_modules/material-shadows"
+                ],
+                sourceMap: args.mode !== "production",
+                sourceMapContents: true
+              }
+            }
+          ]
+        },
+
         /* Cache busting for SVGs */
         {
           test: /\.svg$/,
           use: `file-loader?name=[path][name]${
-            env && env.prod ? ".[md5:hash:hex:8]" : ""
+            args.mode === "production" ? ".[md5:hash:hex:8]" : ""
           }.[ext]&context=./src`
         }
       ]
@@ -88,7 +138,7 @@ module.exports = env => { // eslint-disable-line complexity
     /* Output */
     output: {
       path: path.resolve(__dirname, "material"),
-      filename: `[name]${env && env.prod ? ".[chunkhash]" : ""}.js`,
+      filename: `[name]${args.mode === "production" ? ".[chunkhash]" : ""}.js`,
       hashDigestLength: 8,
       libraryTarget: "window"
     },
@@ -96,12 +146,6 @@ module.exports = env => { // eslint-disable-line complexity
     /* Plugins */
     plugins: [
 
-      /* Combine all dependencies into a single file */
-      new webpack.optimize.CommonsChunkPlugin({
-        name: "src/assets/javascripts/modernizr.js",
-        chunks: [".modernizr-autorc"]
-      }),
-
       /* Provide JSX helper */
       new webpack.ProvidePlugin({
         JSX: path.resolve(__dirname, "src/assets/javascripts/providers/jsx.js")
@@ -187,20 +231,7 @@ module.exports = env => { // eslint-disable-line complexity
                   .join(", "))
           }
         }
-      ]),
+      ])
-
-      /* Hack: The webpack development middleware sometimes goes into a loop on
-         macOS when starting for the first time. This is a quick fix until
-         this issue is resolved. See: http://bit.ly/2AsizEn */
-      new EventHooksPlugin({
-        "watch-run": (compiler, cb) => {
-          compiler.startTime += 10000
-          cb()
-        },
-        "done": stats => {
-          stats.startTime -= 10000
-        }
-      })
     ],
 
     /* Module resolver */
@@ -215,84 +246,38 @@ module.exports = env => { // eslint-disable-line complexity
     },
 
     /* Sourcemaps */
-    devtool: !env || env.prod ? "inline-source-map" : ""
+    devtool: args.mode !== "production" ? "inline-source-map" : "",
-  }
 
-  /* Compile stylesheets */
+    /* Optimizations */
-  for (const stylesheet of [
+    optimization: {
-    "application.scss",
+      minimizer: [
-    "application-palette.scss"
+        new UglifyJsPlugin(),
-  ]) {
+        new OptimizeCSSAssetsPlugin({})
-    const plugin = new ExtractTextPlugin(
+      ],
-      `assets/stylesheets/${
+      splitChunks: {
-        stylesheet.replace(".scss",
+        cacheGroups: {
-          env && env.prod ? ".[md5:contenthash:hex:8]" : ""
+          commons: {
-        )}.css`)
+            chunks: "all",
-
+            minChunks: 2,
-    /* Register plugin */
+            maxInitialRequests: 5,
-    config.plugins.push(plugin)
+            minSize: 0
-    config.module.rules.push({
-      test: new RegExp(`${stylesheet}$`),
-      use: plugin.extract({
-        use: [
-          {
-            loader: "css-loader",
-            options: {
-              minimize: env && env.prod,
-              sourceMap: !(env && env.prod)
-            }
           },
-          {
+          modernizr: {
-            loader: "postcss-loader",
+            test: "src/assets/javascripts/modernizr.js",
-            options: {
+            chunks: "all",
-              ident: "postcss",
+            name: "modernizr",
-              plugins: () => [
+            priority: 10,
-                require("autoprefixer")(),
+            enforce: true
-                require("css-mqpacker")
-              ],
-              sourceMap: !(env && env.prod)
-            }
-          },
-          {
-            loader: "sass-loader",
-            options: {
-              includePaths: [
-                "node_modules/modularscale-sass/stylesheets",
-                "node_modules/material-design-color",
-                "node_modules/material-shadows"
-              ],
-              sourceMap: !(env && env.prod),
-              sourceMapContents: true
-            }
           }
-        ]
+        }
-      })
+      }
-    })
+    }
   }
 
   /* Production compilation */
-  if (env && env.prod) {
+  if (args.mode === "production") {
     config.plugins.push(
 
-      /* Uglify sources */
-      new webpack.optimize.UglifyJsPlugin({
-        compress: {
-          warnings: false,
-          screw_ie8: true,     // eslint-disable-line camelcase
-          conditionals: true,
-          unused: true,
-          comparisons: true,
-          sequences: true,
-          dead_code: true,     // eslint-disable-line camelcase
-          evaluate: true,
-          if_return: true,     // eslint-disable-line camelcase
-          join_vars: true      // eslint-disable-line camelcase
-        },
-        output: {
-          comments: false
-        }
-      }),
-
       /* Minify images */
       new ImageminPlugin({
         test: /\.(ico|png|svg)$/i,
@@ -322,7 +307,7 @@ module.exports = env => { // eslint-disable-line complexity
 
       /* Apply manifest */
       new EventHooksPlugin({
-        "after-emit": (compilation, cb) => {
+        afterEmit: new CallbackTask((compilation, cb) => {
           const manifest = require(path.resolve("material/manifest.json"))
           Object.keys(compilation.assets).forEach(name => {
             if (name.match(/\.html/)) {
@@ -334,7 +319,7 @@ module.exports = env => { // eslint-disable-line complexity
             }
           })
           cb()
-        }
+        })
       })
     )
   }