diff --git a/karma.conf.js b/karma.conf.js
index 6906e9b9102..5309c050672 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -33,8 +33,8 @@ const olm_entry = webpack_config.entry['olm'];
delete webpack_config['entry'];
// add ./test as a search path for js
-webpack_config.module.loaders.unshift({
- test: /\.js$/, loader: "babel",
+webpack_config.module.rules.unshift({
+ test: /\.js$/, use: "babel-loader",
include: [path.resolve('./src'), path.resolve('./test')],
});
@@ -46,8 +46,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';
diff --git a/package.json b/package.json
index 3c4c88cf6dc..b944bbb6dfc 100644
--- a/package.json
+++ b/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:dev": "webpack --optimize-occurence-order --progress --bail",
+ "build:bundle": "cross-env NODE_ENV=production webpack-cli -p --progress --bail --mode production",
+ "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": "npm run reskindex && npm run build:res && npm run build:bundle",
"build:dev": "npm run reskindex && npm run build:res && npm run build:bundle:dev",
@@ -42,7 +42,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": "parallelshell \"npm run reskindex:watch\" \"npm run start:res\" \"npm run start:js\"",
"start:prod": "parallelshell \"npm run reskindex:watch\" \"npm run start:res\" \"npm run start:js:prod\"",
@@ -58,8 +58,8 @@
"babel-runtime": "^6.11.6",
"bluebird": "^3.5.0",
"browser-request": "^0.3.3",
+ "extract-text-webpack-plugin": "^4.0.0-beta.0",
"draft-js": "^0.11.0-alpha",
- "extract-text-webpack-plugin": "^0.9.1",
"favico.js": "^0.3.10",
"gemini-scrollbar": "matrix-org/gemini-scrollbar#b302279",
"gfm.css": "^1.1.1",
@@ -79,7 +79,7 @@
"babel-cli": "^6.5.2",
"babel-core": "^6.14.0",
"babel-eslint": "^6.1.0",
- "babel-loader": "^6.2.5",
+ "babel-loader": "^7.1.4",
"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",
@@ -93,7 +93,6 @@
"chokidar": "^1.6.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",
@@ -105,7 +104,7 @@
"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-chrome-launcher": "^0.2.3",
@@ -116,7 +115,7 @@
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.31",
"karma-summary-reporter": "^1.3.3",
- "karma-webpack": "^1.7.0",
+ "karma-webpack": "^v4.0.0-beta.0",
"matrix-mock-request": "^1.2.0",
"matrix-react-test-utils": "^0.2.0",
"minimist": "^1.2.0",
@@ -124,19 +123,21 @@
"mocha": "^2.4.5",
"parallelshell": "^3.0.2",
"postcss-extend": "^1.0.5",
- "postcss-import": "^9.0.0",
- "postcss-loader": "^1.2.2",
- "postcss-mixins": "^5.4.1",
- "postcss-nested": "^1.0.0",
- "postcss-scss": "^0.4.0",
- "postcss-simple-vars": "^3.0.0",
+ "postcss-import": "^11.1.0",
+ "postcss-loader": "^2.1.4",
+ "postcss-mixins": "^6.2.0",
+ "postcss-nested": "^3.0.0",
+ "postcss-scss": "^1.0.5",
+ "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-dev-server": "^1.16.2"
+ "webpack": "^4.6.0",
+ "webpack-cli": "^2.0.15",
+ "webpack-dev-server": "^3.1.3"
},
"optionalDependencies": {
"olm": "https://matrix.org/packages/npm/olm/olm-2.2.1.tgz"
diff --git a/src/vector/index.html b/src/vector/index.html
index 91d28642c9d..dad179a7ba1 100644
--- a/src/vector/index.html
+++ b/src/vector/index.html
@@ -37,6 +37,14 @@
<% 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')) {
diff --git a/webpack.config.js b/webpack.config.js
index 2a116f57775..8a6d087d985 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -28,29 +28,40 @@ module.exports = {
"theme-status": "./res/themes/status/css/status.scss",
},
module: {
- preLoaders: [
- { test: /\.js$/, loader: "source-map-loader" },
- ],
- loaders: [
- { test: /\.json$/, loader: "json" },
- { test: /\.js$/, loader: "babel", include: path.resolve('./src') },
+ rules: [
+ { enforce: 'pre', test: /\.js$/, use: "source-map-loader", exclude: /node_modules/, },
+ { test: /\.js$/, use: "babel-loader", include: path.resolve(__dirname, '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