Update to Webpack v4

package.json

@@ -24,14 +24,14 @@
   "homepage": "https://github.com/ontodia-org/ontodia#readme",
   "scripts": {
     "build": "npm run _webpack && npm run _typings",
-    "demo": "./node_modules/.bin/webpack-dev-server --port 10444 --config webpack.demo.config.js --content-base dist/",
+    "demo": "./node_modules/.bin/webpack-dev-server --port 10444 --config webpack.demo.config.js",
     "_typings-tsc": "./node_modules/.bin/tsc --declaration --outDir dist/dts",
     "_typings-dts-bundle": "./node_modules/.bin/dts-bundle --main dist/dts/index.d.ts --name ontodia --out ../ontodia.d.ts",
     "_typings": "npm run _typings-tsc && npm run _typings-dts-bundle",
     "test": "npm run _webpack && BUNDLE_PEERS=true npm run _webpack && npm run _typings && npm run _webpack-examples",
     "_webpack": "./node_modules/.bin/webpack",
     "_webpack-examples": "./node_modules/.bin/webpack --config webpack.demo.config.js",
-    "start": "./node_modules/.bin/webpack-dev-server --port 5000 --host 0.0.0.0 --config webpack.demo.config.js --content-base dist/",
+    "start": "./node_modules/.bin/webpack-dev-server --port 5000 --host 0.0.0.0 --config webpack.demo.config.js",
     "lint": "./node_modules/.bin/tslint -c tslint.json 'src/**/*.ts' 'src/**/*.tsx' -t stylish"
   },
   "dependencies": {
@@ -55,15 +55,13 @@
     "@types/react": "15.6.15",
     "@types/react-dom": "15.5.7",
     "canvg-fixed": "1.0.0",
-    "css-loader": "0.23.1",
+    "css-loader": "0.28.11",
     "dts-bundle": "0.7.2",
-    "es6-promise": "4.2.2",
-    "exports-loader": "0.6.3",
-    "expose-loader": "0.7.1",
-    "file-loader": "0.8.5",
-    "html-webpack-plugin": "2.22.0",
+    "es6-promise": "4.2.4",
+    "exports-loader": "0.7.0",
+    "file-loader": "1.1.11",
+    "html-webpack-plugin": "3.2.0",
     "jquery": "2.2.4",
-    "json-loader": "0.5.4",
     "jstree": "3.2.1",
     "node-sass": "4.7.2",
     "raw-loader": "0.5.1",
@@ -72,15 +70,16 @@
     "rdf-parser-rdfxml": "0.3.1",
     "react": "15.6.2",
     "react-dom": "15.6.2",
-    "sass-loader": "4.0.2",
-    "style-loader": "0.13.1",
-    "ts-loader": "1.3.3",
+    "sass-loader": "7.0.1",
+    "style-loader": "0.21.0",
+    "ts-loader": "4.2.0",
     "tslib": "1.9.0",
     "tslint": "4.5.1",
     "typescript": "2.8.3",
-    "url-loader": "0.5.7",
-    "webpack": "1.13.2",
-    "webpack-dev-server": "1.16.2"
+    "url-loader": "1.0.1",
+    "webpack": "4.6.0",
+    "webpack-cli": "2.0.15",
+    "webpack-dev-server": "3.1.3"
   },
   "main": "dist/ontodia.js",
   "typings": "dist/ontodia.d.ts"

src/examples/composite.ts

@@ -22,7 +22,7 @@ import {onPageLoad, tryLoadLayoutFromLocalStorage, saveLayoutToLocalStorage} fro
 import {LinkBinding} from '../ontodia/data/sparql/sparqlModels';
 import {getLinksInfo} from '../ontodia/data/sparql/responseHandler';
 
-const data = require<string>('raw-loader!./resources/testData.ttl');
+const data = require<string>('./resources/testData.ttl');
 
 class TransformingDataProvider extends SparqlDataProvider {
 

src/examples/rdf.ts

@@ -9,7 +9,7 @@ const N3Parser: any = require('rdf-parser-n3');
 const RdfXmlParser: any = require('rdf-parser-rdfxml');
 const JsonLdParser: any = require('rdf-parser-jsonld');
 
-const data = require<string>('raw-loader!./resources/testData.ttl');
+const data = require<string>('./resources/testData.ttl');
 
 function onWorkspaceMounted(workspace: Workspace) {
     if (!workspace) { return; }

src/ontodia/data/demo/provider.ts

@@ -2,10 +2,10 @@ import { cloneDeep, keyBy, map, each } from 'lodash';
 import { DataProvider, LinkElementsParams, FilterParams } from '../provider';
 import { Dictionary, ClassModel, LinkType, ElementModel, LinkModel, LinkCount } from '../model';
 
-const CLASSES = require<ClassModel[]>('json!./data/classes.json');
-const LINK_TYPES = require<LinkType[]>('json!./data/linkTypes.json');
-const ELEMENTS = require<Dictionary<ElementModel>>('json!./data/elements.json');
-const LINKS  = require<LinkModel[]>('json!./data/links.json');
+const CLASSES = require<ClassModel[]>('./data/classes.json');
+const LINK_TYPES = require<LinkType[]>('./data/linkTypes.json');
+const ELEMENTS = require<Dictionary<ElementModel>>('./data/elements.json');
+const LINKS  = require<LinkModel[]>('./data/links.json');
 
 export class DemoDataProvider implements DataProvider {
     private simulateNetwork<T>(result: T) {

src/ontodia/widgets/classTree.tsx

@@ -9,7 +9,7 @@ import { formatLocalizedLabel } from '../diagram/model';
 
 // bundling jstree to solve issues with multiple jquery packages,
 // when jstree sets itself as plugin to wrong version of jquery
-const jstreeJQuery = require<JQueryStatic>('exports?require("jquery")!jstree');
+const jstreeJQuery = require<JQueryStatic>('exports-loader?require("jquery")!jstree');
 require('jstree/dist/themes/default/style.css');
 
 export interface ClassTreeProps {

webpack.config.js

@@ -1,49 +1,36 @@
-var webpack = require('webpack');
-var path = require('path');
-
-var npmDir = path.join(__dirname, 'node_modules');
+const path = require('path');
 
 // if BUNDLE_PEERS is set, we'll produce bundle with all dependencies
-var BUNDLE_PEERS = Boolean(process.env.BUNDLE_PEERS);
+const BUNDLE_PEERS = Boolean(process.env.BUNDLE_PEERS);
 // always include IE support in full bundle
-var SUPPORT_IE = Boolean(process.env.SUPPORT_IE || process.env.BUNDLE_PEERS);
-
-var plugins = [];
-if (BUNDLE_PEERS) {
-    plugins.push(new webpack.optimize.UglifyJsPlugin({
-        compress: {
-            warnings: false
-        }
-    }));
-}
+const SUPPORT_IE = BUNDLE_PEERS || Boolean(process.env.SUPPORT_IE);
 
-var aliases = {};
+const aliases = {};
 if (!SUPPORT_IE) {
     const emptyModule = path.resolve(__dirname, 'src', 'emptyModule.ts');
     aliases['canvg-fixed'] = emptyModule;
     aliases['es6-promise/auto'] = emptyModule;
 }
 
 module.exports = {
-    entry: {
-        ontodia: path.join(__dirname, 'src', 'index.ts'),
-    },
+    mode: BUNDLE_PEERS ? 'production' : 'none',
+    entry: './src/index.ts',
     resolve: {
         alias: aliases,
-        extensions: ['', '.ts', '.tsx', '.webpack.js', '.web.js', '.js'],
+        extensions: ['.ts', '.tsx', '.js'],
     },
     module: {
-        loaders: [
-            {test: /\.ts$|\.tsx$/, loader: 'ts-loader'},
-            {test: /\.css$/, loader: 'style-loader!css-loader'},
-            {test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader'},
-            {test: /\.jpe?g$/, loader: 'url-loader?mimetype=image/jpeg'},
-            {test: /\.gif$/, loader: 'url-loader?mimetype=image/gif'},
-            {test: /\.png$/, loader: 'url-loader?mimetype=image/png'},
-            {test: /\.svg$/, loader: 'url-loader?mimetype=image/svg+xml'},
-        ],
+        rules: [
+            {test: /\.ts$|\.tsx$/, use: ['ts-loader']},
+            {test: /\.css$/, use: ['style-loader', 'css-loader']},
+            {test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']},
+            {
+                test: /\.(jpe?g|gif|png|svg)$/,
+                use: [{loader: 'url-loader'}],
+            },
+            {test: /\.ttl$/, use: ['raw-loader']},
+        ]
     },
-    plugins: plugins,
     output: {
         path: path.join(__dirname, 'dist'),
         filename: (
@@ -54,15 +41,17 @@ module.exports = {
         library: 'Ontodia',
         libraryTarget: 'umd',
     },
-    externals: BUNDLE_PEERS ? {} : {
-        'd3-color': true,
-        'intro.js': true,
-        'lodash': true,
-        'n3': true,
-        'react': true,
-        'react-dom': true,
-        'webcola': true,
-        'whatwg-fetch': true,
-    },
-    devtool: '#source-map',
+    devtool: 'source-map',
+    externals: BUNDLE_PEERS ? [] : [
+        'd3-color',
+        'file-saverjs',
+        'intro.js',
+        'lodash',
+        'n3',
+        'rdf-ext',
+        'react',
+        'react-dom',
+        'webcola',
+        'whatwg-fetch',
+    ],
 };