Merge pull request #7387 from vector-im/matthew/webpack4

Webpack4

karma.conf.js

@@ -32,9 +32,12 @@ const olm_entry = webpack_config.entry['olm'];
 // 'preprocessors' config below)
 delete webpack_config['entry'];
 
+// make sure we're flagged as development to avoid wasting time optimising
+webpack_config.mode = 'development';
+
 // add ./test as a search path for js
-webpack_config.module.loaders.unshift({
+webpack_config.module.rules.unshift({
-    test: /\.js$/, loader: "babel",
+    test: /\.js$/, use: "babel-loader",
     include: [path.resolve('./src'), path.resolve('./test')],
 });
 
@@ -46,8 +49,9 @@ webpack_config.module.noParse.push(/sinon\/pkg\/sinon\.js$/);
 // ?
 webpack_config.resolve.alias['sinon'] = 'sinon/pkg/sinon.js';
 
-webpack_config.resolve.root = [
+webpack_config.resolve.modules = [
     path.resolve('./test'),
+    "node_modules"
 ];
 
 webpack_config.devtool = 'inline-source-map';

package.json

@@ -33,8 +33,8 @@
     "build:res": "node scripts/copy-res.js",
     "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js",
     "build:compile": "npm run reskindex && babel --source-maps -d lib src",
-    "build:bundle": "cross-env NODE_ENV=production webpack -p --progress --bail",
+    "build:bundle": "cross-env NODE_ENV=production webpack-cli -p --progress --bail --mode production",
-    "build:bundle:dev": "webpack --optimize-occurence-order --progress --bail",
+    "build:bundle:dev": "webpack-cli --progress --bail --mode development",
     "build:electron": "npm run clean && npm run build && npm run install:electron && build -wml --ia32 --x64",
     "build:react-sdk": "node scripts/npm-sub.js matrix-react-sdk run start:init",
     "build:js-sdk": "node scripts/npm-sub.js matrix-js-sdk run start:init",
@@ -44,7 +44,7 @@
     "install:electron": "install-app-deps",
     "electron": "npm run install:electron && electron .",
     "start:res": "node scripts/copy-res.js -w",
-    "start:js": "webpack-dev-server --output-filename=bundles/_dev_/[name].js --output-chunk-file=bundles/_dev_/[name].js -w --progress",
+    "start:js": "webpack-dev-server --output-filename=bundles/_dev_/[name].js --output-chunk-filename=bundles/_dev_/[name].js -w --progress --mode development",
     "start:js:prod": "cross-env NODE_ENV=production webpack-dev-server -w --progress",
     "start:js-sdk": "node scripts/npm-sub.js matrix-js-sdk run start:watch",
     "start:js-sdk:prod": "cross-env NODE_ENV=production node scripts/npm-sub.js matrix-js-sdk run start:watch",
@@ -60,12 +60,12 @@
     "test-multi": "karma start"
   },
   "dependencies": {
-    "babel-polyfill": "^6.5.0",
+    "babel-polyfill": "^6.26.0",
-    "babel-runtime": "^6.11.6",
+    "babel-runtime": "^6.26.0",
     "bluebird": "^3.5.0",
     "browser-request": "^0.3.3",
     "draft-js": "^0.11.0-alpha",
-    "extract-text-webpack-plugin": "^0.9.1",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "favico.js": "^0.3.10",
     "gemini-scrollbar": "matrix-org/gemini-scrollbar#b302279",
     "gfm.css": "^1.1.1",
@@ -82,67 +82,68 @@
   },
   "devDependencies": {
     "autoprefixer": "^6.6.0",
-    "babel-cli": "^6.5.2",
+    "babel-cli": "^6.26.0",
-    "babel-core": "^6.14.0",
+    "babel-core": "^6.26.3",
-    "babel-eslint": "^6.1.0",
+    "babel-eslint": "^6.1.2",
-    "babel-loader": "^6.2.5",
+    "babel-loader": "^7.1.5",
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-transform-async-to-bluebird": "^1.1.1",
-    "babel-plugin-transform-class-properties": "^6.16.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.16.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-plugin-transform-runtime": "^6.15.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-es2015": "^6.16.0",
+    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-es2016": "^6.16.0",
+    "babel-preset-es2016": "^6.24.1",
-    "babel-preset-es2017": "^6.16.0",
+    "babel-preset-es2017": "^6.24.1",
-    "babel-preset-react": "^6.16.0",
+    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-2": "^6.17.0",
+    "babel-preset-stage-2": "^6.24.1",
     "chokidar": "^1.6.1",
     "concurrently": "^4.0.1",
     "cpx": "^1.3.2",
     "cross-env": "^4.0.0",
-    "css-raw-loader": "^0.1.1",
     "electron-builder": "^11.2.4",
     "electron-builder-squirrel-windows": "^11.2.1",
     "electron-devtools-installer": "^2.2.0",
     "emojione": "^2.2.7",
     "eslint": "^3.14.0",
     "eslint-config-google": "^0.7.1",
-    "eslint-plugin-babel": "^4.1.1",
+    "eslint-plugin-babel": "^4.1.2",
     "eslint-plugin-flowtype": "^2.30.0",
     "eslint-plugin-react": "^7.4.0",
     "expect": "^1.16.0",
     "fs-extra": "^0.30.0",
-    "html-webpack-plugin": "^2.24.0",
+    "html-webpack-plugin": "^3.2.0",
     "json-loader": "^0.5.3",
-    "karma": "^1.7.0",
+    "karma": "^3.0.0",
     "karma-chrome-launcher": "^0.2.3",
-    "karma-cli": "^0.1.2",
+    "karma-cli": "^1.0.1",
-    "karma-junit-reporter": "^0.4.1",
+    "karma-junit-reporter": "^0.4.2",
     "karma-logcapture-reporter": "0.0.1",
-    "karma-mocha": "^0.2.2",
+    "karma-mocha": "^1.3.0",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "0.0.31",
-    "karma-summary-reporter": "^1.3.3",
+    "karma-summary-reporter": "^1.5.1",
-    "karma-webpack": "^1.7.0",
+    "karma-webpack": "4.0.0-beta.0",
     "matrix-mock-request": "^1.2.0",
     "matrix-react-test-utils": "^0.2.0",
     "minimist": "^1.2.0",
     "mkdirp": "^0.5.1",
     "mocha": "^2.4.5",
     "postcss-extend": "^1.0.5",
-    "postcss-import": "^9.0.0",
+    "postcss-import": "^11.1.0",
-    "postcss-loader": "^1.2.2",
+    "postcss-loader": "^2.1.6",
-    "postcss-mixins": "^5.4.1",
+    "postcss-mixins": "^6.2.0",
-    "postcss-nested": "^1.0.0",
+    "postcss-nested": "^3.0.0",
-    "postcss-scss": "^0.4.0",
+    "postcss-scss": "^1.0.6",
-    "postcss-simple-vars": "^3.0.0",
+    "postcss-simple-vars": "^4.1.0",
     "postcss-strip-inline-comments": "^0.1.5",
+    "raw-loader": "^0.5.1",
     "react-addons-perf": "^15.4.0",
     "react-addons-test-utils": "^15.6.0",
     "rimraf": "^2.4.3",
     "source-map-loader": "^0.2.3",
-    "webpack": "^1.12.14",
+    "webpack": "^4.20.2",
-    "webpack-dev-server": "^1.16.2"
+    "webpack-cli": "^3.1.1",
+    "webpack-dev-server": "^3.1.9"
   },
   "optionalDependencies": {
     "olm": "https://matrix.org/packages/npm/olm/olm-2.2.1.tgz"

src/vector/index.html

@@ -37,6 +37,14 @@
     <section id="matrixchat" style="height: 100%;"></section>
     <noscript>Sorry, Riot requires JavaScript to be enabled.</noscript> <!-- TODO: Translate this? -->
     <% for (var i=0; i < htmlWebpackPlugin.files.js.length; i++) {
+        if (_.endsWith(htmlWebpackPlugin.files.js[i], 'olm.js')) {
+            var array = htmlWebpackPlugin.files.js;
+            htmlWebpackPlugin.files.js.unshift(htmlWebpackPlugin.files.js[i]);
+            htmlWebpackPlugin.files.js.splice(i, 1);
+        }
+       }
+
+       for (var i=0; i < htmlWebpackPlugin.files.js.length; i++) {
         // Not a particularly graceful way of not putting the indexeddb worker script
         // into the main page
         if (_.endsWith(htmlWebpackPlugin.files.js[i], 'indexeddb-worker.js')) {

webpack.config.js

@@ -30,29 +30,40 @@ module.exports = {
         "theme-status": "./res/themes/status/css/status.scss",
     },
     module: {
-        preLoaders: [
+        rules: [
-            { test: /\.js$/, loader: "source-map-loader" },
+            { enforce: 'pre', test: /\.js$/, use: "source-map-loader", exclude: /node_modules/, },
-        ],
+            { test: /\.js$/, use: "babel-loader", include: path.resolve(__dirname, 'src') },
-        loaders: [
-            { test: /\.json$/, loader: "json" },
-            { test: /\.js$/, loader: "babel", include: path.resolve('./src') },
             {
                 test: /\.scss$/,
-
                 // 1. postcss-loader turns the SCSS into normal CSS.
-                // 2. css-raw-loader turns the CSS into a javascript module
+                // 2. raw-loader turns the CSS into a javascript module
                 //    whose default export is a string containing the CSS.
-                //    (css-raw-loader is similar to css-loader, but the latter
+                //    (raw-loader is similar to css-loader, but the latter
                 //    would also drag in the imgs and fonts that our CSS refers to
                 //    as webpack inputs.)
                 // 3. ExtractTextPlugin turns that string into a separate asset.
-                loader: ExtractTextPlugin.extract("css-raw-loader!postcss-loader?config=postcss.config.js"),
+                use: ExtractTextPlugin.extract({
+                    use: [
+                        "raw-loader",
+                        {
+                            loader: 'postcss-loader',
+                            options: {
+                                config: {
+                                    path: './postcss.config.js'
+                                }
+                            }
+                        }
+                    ],
+                }),
             },
             {
                 // this works similarly to the scss case, without postcss.
                 test: /\.css$/,
-                loader: ExtractTextPlugin.extract("css-raw-loader"),
+                use: ExtractTextPlugin.extract({
+                    use: "raw-loader"
+                }),
             },
+
         ],
         noParse: [
             // for cross platform compatibility use [\\\/] as the path separator