Merge branch 'feature/webpack4' into develop

Author: alexanderwe

.prettierignore

@@ -0,0 +1 @@
+webpack.config.js

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "checksum-validator",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Small Electron application to validate checksums.",
   "main": "build/main.js",
   "author": "Alexander Weiss",

app/renderer/src/components/ChecksOverview.component.tsx

@@ -50,7 +50,7 @@ class ChecksOverview extends React.Component<any, any> {
   };
 
   deleteCancel = e => {
-    console.log(e);
+    //doNothing
   };
 
   render() {

app/renderer/src/styles/colors.less app/renderer/src/styles/ant-default-vars.less

@@ -1,3 +1,2 @@
-@import '../../../node_modules/antd/dist/antd.less'; // import official less entry file, but consider to switch to the babel-plugin-import way
 @import 'antd-icons.css';
 @import 'theme.less';

app/renderer/src/styles/style.less

@@ -1,6 +1,6 @@
 @import './app.less';
 @import './nc-icons.css';
-@import './colors.less';
+@import './ant-default-vars.less';
 
 strong {
   color: @primary-color;

app/renderer/src/styles/theme.less

@@ -1,6 +1,6 @@
 {
   "name": "checksum-validator",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Small Electron application to validate checksums.",
   "scripts": {
     "babel:watch": "babel ./app/main/src/ -w -d ./app/main/build",
@@ -24,34 +24,33 @@
     "@types/react": "^16.0.18",
     "@types/react-dom": "^16.0.2",
     "@types/react-transition-group": "^2.0.6",
-    "@types/username": "^3.0.0",
-    "awesome-typescript-loader": "^3.2.3",
     "chai": "^4.1.2",
     "chai-as-promised": "^7.1.1",
     "copy-webpack-plugin": "^4.2.0",
-    "css-loader": "^0.28.7",
+    "css-loader": "^0.28.10",
     "electron": "^1.8.2",
-    "electron-builder": "^20.0.4",
+    "electron-builder": "^20.3.1",
     "electron-devtools-installer": "^2.2.3",
     "electron-react-devtools": "^0.5.3",
     "electron-reload": "^1.1.0",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "file-loader": "^1.1.6",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "file-loader": "^1.1.11",
     "less": "^2.7.1",
-    "less-loader": "^4.0.5",
+    "less-loader": "^4.0.6",
+    "less-vars-to-js": "^1.2.1",
     "mocha": "^5.0.1",
     "spectron": "^3.7.2",
-    "style-loader": "^0.20.1",
+    "style-loader": "^0.20.2",
     "ts-import-plugin": "^1.4.3",
-    "ts-loader": "^3.5.0",
+    "ts-loader": "^4.0.1",
     "ts-node": "^4.1.0",
     "tslint": "^5.8.0",
     "tslint-config-airbnb": "^5.3.0",
     "tslint-config-prettier": "^1.6.0",
     "typescript": "^2.7.1",
-    "url-loader": "^0.6.2",
-    "webpack": "^3.8.1",
-    "webpack-dashboard": "^1.0.0",
+    "url-loader": "^1.0.1",
+    "webpack": "^4.1.0",
+    "webpack-cli": "^2.0.10",
     "webpack-node-externals": "^1.6.0"
   },
   "build": {

package.json

@@ -1,16 +1,22 @@
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const DashboardPlugin = require('webpack-dashboard/plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const nodeExternals = require('webpack-node-externals');
 const tsImportPluginFactory = require('ts-import-plugin');
 const path = require('path');
+const fs = require('fs');
+const lessToJs = require('less-vars-to-js');
+
+const themeVariables = lessToJs(fs.readFileSync(path.join(__dirname, './app/renderer/src/styles/ant-default-vars.less'), 'utf8'));
+themeVariables["@icon-url"] = "'/'";
+
 module.exports = function(env) {
   console.log(env);
   let config = {
     module: {},
   };
 
   let rendererConfig = Object.assign({}, config, {
+    mode: 'production',
     watch: env.mode == 'watch' ? true : false,
     target: 'electron-renderer',
     node: {
@@ -33,11 +39,17 @@ module.exports = function(env) {
           test: /\.(jsx|tsx|js|ts)$/,
           use: [
             {
-              loader: 'awesome-typescript-loader',
+              loader: 'ts-loader',
               options: {
                 transpileOnly: true,
                 getCustomTransformers: () => ({
-                  before: [tsImportPluginFactory(/** options */)],
+                  before: [
+                    tsImportPluginFactory({
+                      libraryName: 'antd',
+                      libraryDirectory: 'lib',
+                      style: true,
+                    }),
+                  ],
                 }),
                 compilerOptions: {
                   module: 'es2015',
@@ -56,7 +68,15 @@ module.exports = function(env) {
         },
         {
           test: /\.less$/,
-          use: ExtractTextPlugin.extract(['css-loader', 'less-loader']),
+          use: [
+            {loader: "style-loader"},
+            {loader: "css-loader"},
+            {loader: "less-loader",
+              options: {
+                modifyVars: themeVariables
+              }
+            }
+          ]
         },
         {
           test: /\.(png|jpg|gif|svg)$/,
@@ -81,11 +101,11 @@ module.exports = function(env) {
         disable: false,
         allChunks: true,
       }),
-      new DashboardPlugin(),
     ],
   });
 
   let mainConfig = Object.assign({}, config, {
+    mode: 'production',
     entry: './app/main/src/main.ts',
     target: 'electron-main',
     node: {
@@ -104,15 +124,14 @@ module.exports = function(env) {
       rules: [
         {
           test: /.ts$/,
-          use: [{ loader: 'awesome-typescript-loader' }],
+          use: [{ loader: 'ts-loader' }],
         },
       ],
     },
     plugins: [
       new CopyWebpackPlugin([
         { from: 'app/lib/i18n/', to: 'app/build/', ignore: ['*.ts'] },
       ]),
-      new DashboardPlugin(),
     ],
   });