Update to webpack 2.x

electron/src/webpack.config.electron-main.js

@@ -1,5 +1,4 @@
 //var webpack = require("webpack");
-var webpackFailPlugin = require('webpack-fail-plugin');
 var path = require('path');
 
 var rootDir = path.resolve(__dirname, '../');
@@ -13,16 +12,15 @@ module.exports = {
     target: 'electron-main',
     devtool: 'source-map',
     resolve: {
-        extensions: ['', '.webpack.js', '.web.js', '.ts', '.js'],
+        extensions: ['.webpack.js', '.web.js', '.ts', '.js'],
-        modules: [path.join(rootDir, "node_modules")]
+        modules: ["node_modules"]
     },
     module: {
-        loaders: [
+        rules: [
             { test: /\.ts$/, loader: 'ts-loader?' + JSON.stringify({ configFileName: 'tsconfig-electron-main.json' }), exclude: /node_modules/ },
     ]},
     plugins: [
         //   new webpack.optimize.UglifyJsPlugin({ minimize: true })
-        webpackFailPlugin
     ],
     node: {
         __dirname: false,

electron/src/webpack.config.js

@@ -1,6 +1,5 @@
 var webpack = require("webpack");
 var SvgStore = require('webpack-svgstore-plugin');
-var webpackFailPlugin = require('webpack-fail-plugin');
 var CopyWebpackPlugin = require('copy-webpack-plugin');
 var path = require('path');
 var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
@@ -23,8 +22,8 @@ module.exports = {
     },
     devtool: 'source-map',
     resolve: {
-        extensions: ['', '.webpack.js', '.web.js', '.ts', '.js'],
+        extensions: ['.webpack.js', '.web.js', '.ts', '.js'],
-        modules: [path.join(rootDir, "node_modules")],
+        modules: ["node_modules"],
         alias: {
             jquery: 'jquery/dist/jquery.min.js',
             select2: 'select2/dist/js/select2.full.min.js',
@@ -32,16 +31,16 @@ module.exports = {
         }
     },
     module: {
-        loaders: [
+        rules: [
-            { test: /\.ts$/, loaders: ['ts-loader', 'angular2-template-loader'], exclude: /node_modules/ },
+            { test: /\.ts$/, use: ['ts-loader', 'angular2-template-loader'], exclude: /node_modules/ },
             { test: /\.html$/, loader: 'html-loader?attrs=false' },
             {
                 test: /\.scss$/,
                 exclude: /node_modules/,
-                loaders: ['raw-loader', 'sass-loader']
+                use: ['raw-loader', 'sass-loader']
             },
-            { test: /jquery/, loader: 'expose?$!expose?jQuery' },
+            { test: /jquery/, loader: 'expose-loader?$!expose-loader?jQuery' },
-            { test: require.resolve("usb"), loader: "expose?usb" }
+            { test: require.resolve("usb"), loader: "expose-loader?usb" }
         ]
     },
     plugins: [
@@ -53,7 +52,6 @@ module.exports = {
                 ]
             }
         }),
-        webpackFailPlugin,
         new CopyWebpackPlugin(
             [
                 {

package.json

@@ -32,12 +32,11 @@
     "raw-loader": "^0.5.1",
     "sass-loader": "^5.0.1",
     "stylelint": "^7.8.0",
-    "ts-loader": "^1.3.2",
+    "ts-loader": "^2.0.0",
     "tslint": "~4.4.2",
-    "webpack": "^1.14.0",
+    "webpack": "^2.2.1",
-    "webpack-dev-server": "^1.16.3",
+    "webpack-dev-server": "^2.3.0",
-    "webpack-fail-plugin": "^1.0.5",
+    "webpack-svgstore-plugin": "4.0.0"
-    "webpack-svgstore-plugin": "^3.0.6"
   },
   "dependencies": {
     "@angular/common": "2.4.7",

shared/src/components/popover/tab/keypress/keypress-tab.component.ts

@@ -37,8 +37,8 @@ export class KeypressTabComponent extends Tab implements OnChanges {
             id: '0',
             text: 'None'
         }];
-        this.scanCodeGroups = this.scanCodeGroups.concat(require('json!./scancodes.json'));
+        this.scanCodeGroups = this.scanCodeGroups.concat(require('json-loader!./scancodes.json'));
-        this.longPressGroups = require('json!./longPress.json');
+        this.longPressGroups = require('json-loader!./longPress.json');
         this.leftModifierSelects = Array(this.leftModifiers.length).fill(false);
         this.rightModifierSelects = Array(this.rightModifiers.length).fill(false);
         this.scanCode = 0;

shared/src/components/svg/keyboard/svg-keyboard.component.ts

@@ -69,7 +69,7 @@ export class SvgKeyboardComponent implements OnInit {
     }
 
     private getBaseLayer(): any {
-        return require('xml!../../../../../images/base-layer.svg').svg;
+        return require('xml-loader!../../../../../images/base-layer.svg').svg;
     }
 
 }

shared/src/store/storage/index.ts

@@ -54,8 +54,8 @@ export class DataStorage {
 
     initUHKJson() {
         this.defaultUserConfiguration = new UserConfiguration()
-            .fromJsonObject(require('json!../../config-serializer/user-config.json'));
+            .fromJsonObject(require('json-loader!../../config-serializer/user-config.json'));
-        this.uhkPresets = (<any[]>require('json!../../config-serializer/preset-keymaps.json'))
+        this.uhkPresets = (<any[]>require('json-loader!../../config-serializer/preset-keymaps.json'))
             .map(keymap => new Keymap().fromJsonObject(keymap));
     }
 

test-serializer/webpack.config.js

@@ -1,5 +1,4 @@
 // var webpack = require("webpack");
-var webpackFailPlugin = require('webpack-fail-plugin');
 
 module.exports = {
     entry: {
@@ -11,22 +10,16 @@ module.exports = {
         filename: "test-serializer.js"
     },
     resolve: {
-        extensions: ['', '.webpack.js', '.web.js', '.ts', '.js'],
+        extensions: ['.webpack.js', '.web.js', '.ts', '.js'],
-        alias: {
+        modules: ['node_modules']
-
-        },
-        modulesDirectories: [
-            '../node_modules'
-        ]
     },
     module: {
-        loaders: [
+        rules: [
             { test: /\.ts$/, loader: 'ts-loader', exclude: /node_modules/ }
         ]
     },
     plugins: [
         //   new webpack.optimize.UglifyJsPlugin({ minimize: true }),
-        webpackFailPlugin
     ],
     node: {
         fs: "empty"

web/src/webpack.config.js

@@ -1,6 +1,5 @@
 var webpack = require("webpack");
 var SvgStore = require('webpack-svgstore-plugin');
-var webpackFailPlugin = require('webpack-fail-plugin');
 var CopyWebpackPlugin = require('copy-webpack-plugin');
 var path = require('path');
 var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
@@ -20,8 +19,8 @@ module.exports = {
     },
     devtool: 'source-map',
     resolve: {
-        extensions: ['', '.webpack.js', '.web.js', '.ts', '.js'],
+        extensions: ['.webpack.js', '.web.js', '.ts', '.js'],
-        modules: [path.join(rootDir, "node_modules")],
+        modules: ["node_modules"],
         alias: {
             jquery: 'jquery/dist/jquery.min.js',
             select2: 'select2/dist/js/select2.full.min.js',
@@ -29,15 +28,15 @@ module.exports = {
         }
     },
     module: {
-        loaders: [
+        rules: [
-            { test: /\.ts$/, loaders: ['ts-loader', 'angular2-template-loader'], exclude: /node_modules/ },
+            { test: /\.ts$/, use: ['ts-loader', 'angular2-template-loader'], exclude: /node_modules/ },
             { test: /\.html$/, loader: 'html-loader?attrs=false' },
             {
                 test: /\.scss$/,
                 exclude: /node_modules/,
-                loaders: ['raw-loader', 'sass-loader']
+                use: ['raw-loader', 'sass-loader']
             },
-            { test: /jquery/, loader: 'expose?$!expose?jQuery' }
+            { test: /jquery/, loader: 'expose-loader?$!expose-loader?jQuery' }
         ]
     },
     plugins: [
@@ -49,7 +48,6 @@ module.exports = {
                 ]
             }
         }),
-        webpackFailPlugin,
         new CopyWebpackPlugin(
             [
                 { from: './web/src/index.html', flatten: true },