Updated dependencies; refined build processes; added sonar scanner

xJREB · xJREB · commit 00eba3620605 · 2018-09-28T09:56:23.000+02:00
diff --git a/README.md b/README.md
@@ -29,6 +29,9 @@ npm run lint
 
 # run tests and create coverage reports
 npm test
+
+# run SonarQube analysis (configure sonar-project.properties first or pass parameters to choose the SonarQube instance)
+npm run sonar
 ```
 
 ## Useful VSCode Extensions
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,16 +1,17 @@
 {
     "name": "skeleton-vue-typescript",
     "description": "A web frontend skeleton project with Vue.js, TypeScript, Bootstrap, Less, Webpack, and Jest.",
-    "version": "0.0.1",
+    "version": "0.0.2",
     "license": "Apache-2.0",
     "private": true,
     "author": "Justus Bogner <jreb1990@gmail.com>",
     "scripts": {
-        "build": "webpack --config webpack.prod.config.js --json --progress | tail -n +2 > ./build.log.json",
+        "build": "webpack --config webpack.prod.config.js --progress",
         "start": "webpack-dev-server --open --hot --config webpack.dev.config.js",
         "start-prod": "webpack-dev-server --open --config webpack.prod.config.js",
         "lint": "tslint -c tslint.json src/**/*.ts",
-        "test": "jest"
+        "test": "jest",
+        "sonar": "sonar-scanner"
     },
     "jest": {
         "testURL": "http://localhost",
@@ -44,33 +45,35 @@
         "moment": "^2.22.2",
         "vue": "^2.5.17",
         "vue-class-component": "^6.2.0",
-        "vue-property-decorator": "^7.0.0",
+        "vue-property-decorator": "^7.1.1",
         "vue-router": "^3.0.1"
     },
     "devDependencies": {
         "@types/jest": "^23.0.0",
-        "@vue/test-utils": "^1.0.0-beta.16",
+        "@vue/test-utils": "^1.0.0-beta.25",
+        "clean-webpack-plugin": "^0.1.19",
         "css-loader": "^1.0.0",
-        "file-loader": "^1.1.11",
+        "file-loader": "^2.0.0",
         "git-revision-webpack-plugin": "^3.0.3",
+        "html-loader": "^0.5.5",
+        "html-webpack-plugin": "^3.2.0",
         "jest": "^23.0.1",
-        "less": "^3.8.0",
+        "less": "^3.8.1",
         "less-loader": "^4.1.0",
-        "progress-bar-webpack-plugin": "^1.11.0",
+        "sonarqube-scanner": "^2.1.1",
         "string-replace-loader": "^2.1.1",
         "ts-jest": "^22.4.6",
-        "ts-loader": "^4.4.2",
+        "ts-loader": "^5.2.1",
         "tslint": "^5.11.0",
         "tslint-loader": "^3.6.0",
         "tslint-webpack-plugin": "^1.2.2",
-        "typescript": "^3.0.1",
+        "typescript": "^3.1.1",
         "vue-jest": "^2.6.0",
-        "vue-loader": "^15.2.6",
+        "vue-loader": "^15.4.2",
         "vue-template-compiler": "^2.5.17",
-        "webpack": "^4.16.3",
-        "webpack-cli": "^3.1.0",
-        "webpack-dev-server": "^3.1.5",
-        "webpack-file-changer": "^2.0.1",
+        "webpack": "^4.20.2",
+        "webpack-cli": "^3.1.1",
+        "webpack-dev-server": "^3.1.9",
         "webpack-merge": "^4.1.4"
     }
 }
diff --git a/sonar-project.properties b/sonar-project.properties
@@ -0,0 +1,8 @@
+# must be unique in a given SonarQube instance
+sonar.projectKey=skeleton-vue-typescript
+# this is the name and version displayed in the SonarQube UI. Was mandatory prior to SonarQube 6.1.
+sonar.projectName=Vue.js TypeScript Skeleton Project
+ 
+# Path is relative to the sonar-project.properties file. Replace "\" by "/" on Windows.
+# This property is optional if sonar.modules is set. 
+sonar.sources=src
diff --git a/src/index.html b/src/index.html
@@ -6,9 +6,9 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
     <title>Vue.js TypeScript Skeleton</title>
-    <!-- <link rel="shortcut icon" href="imgs/favicon.ico" type="image/x-icon"> -->
 
-    <script src="bundle.js"></script>
+    <!-- Webpack will inject the bundle script tag -->
+
 </head>
 
 <body>
diff --git a/webpack.base.config.js b/webpack.base.config.js
@@ -1,28 +1,28 @@
 // External
 const path = require("path");
-const fs = require("fs");
 const moment = require("moment");
 const GitRevisionPlugin = require("git-revision-webpack-plugin");
-const ProgessBarPlugin = require("progress-bar-webpack-plugin");
 const VueLoaderPlugin = require("vue-loader/lib/plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
 
 const rawBuildDate = new Date();
 // Build datestring
 // Regex for extracting the timezone from http://stackoverflow.com/a/15304657
-const buildDate = `${
-    moment(rawBuildDate).format("YYYY-MM-DD HH:mm")
-    } ${
+const buildDate = `${moment(rawBuildDate).format("YYYY-MM-DD HH:mm")} ${
     rawBuildDate.toString().match(/([A-Z]+[\+-][0-9]+)/)[1]
-    }`;
+}`;
 
 module.exports = {
     context: path.resolve(__dirname, "src"),
     plugins: [
-        gitRevisionPlugin = new GitRevisionPlugin({
+        (gitRevisionPlugin = new GitRevisionPlugin({
             lightweightTags: true
-        }),
-        new ProgessBarPlugin(),
-        new VueLoaderPlugin()
+        })),
+        new VueLoaderPlugin(),
+        new HtmlWebpackPlugin({
+            template: path.resolve(__dirname, "src", "index.html"),
+            inject: "head"
+        })
     ],
 
     resolve: {
@@ -33,7 +33,8 @@ module.exports = {
     },
 
     module: {
-        rules: [{
+        rules: [
+            {
                 test: /(\.ts|\.js)$/,
                 loader: "ts-loader",
                 exclude: /node_modules/,
@@ -53,7 +54,7 @@ module.exports = {
             },
             {
                 test: /\.html$/,
-                loader: "file-loader",
+                loader: "html-loader",
                 options: {
                     name: "[name].[ext]"
                 },
@@ -62,7 +63,7 @@ module.exports = {
             {
                 test: /\.less$/,
                 use: ["vue-style-loader", "css-loader", "less-loader"],
-                exclude: /node_modules/,
+                exclude: /node_modules/
             },
             {
                 test: /\.css$/,
@@ -81,7 +82,8 @@ module.exports = {
                 enforce: "pre",
                 loader: "string-replace-loader",
                 query: {
-                    multiple: [{
+                    multiple: [
+                        {
                             search: "$VERSION",
                             replace: gitRevisionPlugin.version()
                         },
@@ -93,5 +95,5 @@ module.exports = {
                 }
             }
         ]
-    },
+    }
 };
diff --git a/webpack.dev.config.js b/webpack.dev.config.js
@@ -1,9 +1,6 @@
 // External
-const fs = require("fs");
 const path = require("path");
-const webpack = require("webpack");
 const webpackMerge = require("webpack-merge");
-const TSLintPlugin = require("tslint-webpack-plugin");
 
 // Internal
 const commonConfig = require("./webpack.base.config");
diff --git a/webpack.prod.config.js b/webpack.prod.config.js
@@ -1,7 +1,6 @@
 // External
-const webpack = require("webpack");
 const webpackMerge = require("webpack-merge");
-const FileChanger = require("webpack-file-changer")
+const CleanWebpackPlugin = require("clean-webpack-plugin");
 const path = require("path");
 
 // Internal
@@ -14,16 +13,8 @@ module.exports = webpackMerge(commonConfig, {
         filename: "bundle.[hash].js"
     },
     optimization: {
+        concatenateModules: true,
         minimize: true
     },
-    plugins: [
-        new FileChanger({
-            change: [{
-                file: "target/index.html",
-                parameters: {
-                    "bundle\\.js": "bundle.[hash].js",
-                }
-            }]
-        })
-    ]
+    plugins: [new CleanWebpackPlugin(["target"])]
 });
