Webpack 4 (WIP) (#12098)

* Webpack 4

* webpack: force angular version 1.6 as 1.7 has removed a legacy feature toggle Grafana needs, switched from awesome-typescript-loader to ts-loader & forked ts checker

* Webpack 4

* webpack: force angular version 1.6 as 1.7 has removed a legacy feature toggle Grafana needs, switched from awesome-typescript-loader to ts-loader & forked ts checker

* upgrade ts loader

* simplified splitChunks

* upgrade circle node image to v8

* webpack: minor changes, using the new mode option, removed unused awesome-typescript loader, investigating karma issue but no solution yet

* fix: change angular mocks version restriction to be more strict

* add babel-loader for HMR support, fix karma debug runner

* babel-loader to yarn.lock

* webpack: changed from ExtractTextPlugin  to MiniCssExtractPlugin, and updated the minification step to use new webpack4 optimization config section

* webpack: remove css minifcation from general css processing as it's done in the webpack optimization step

* limit vendors chunk to .ts and .js files

* fix: removed typescript compile error, wanted to see if we still got test failure for that

* tech: upgrade uglify-js, should be faster now

scripts/webpack/webpack.prod.js

@@ -1,21 +1,22 @@
 'use strict';
 
 const merge = require('webpack-merge');
-const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 const common = require('./webpack.common.js');
 const webpack = require('webpack');
 const path = require('path');
 const ngAnnotatePlugin = require('ng-annotate-webpack-plugin');
 const HtmlWebpackPlugin = require("html-webpack-plugin");
-const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
 
 module.exports = merge(common, {
+  mode: 'production',
   devtool: "source-map",
 
   entry: {
     dark: './public/sass/grafana.dark.scss',
     light: './public/sass/grafana.light.scss',
-    vendor: require('./dependencies'),
   },
 
   module: {
@@ -35,49 +36,49 @@ module.exports = merge(common, {
       {
         test: /\.tsx?$/,
         exclude: /node_modules/,
-        use: [
-          {
-            loader: 'awesome-typescript-loader',
-            options: {
-              errorsAsWarnings: false,
-            },
+        use: {
+          loader: 'ts-loader',
+          options: {
+            transpileOnly: true
           },
-        ]
+        },
       },
       require('./sass.rule.js')({
-        sourceMap: false, minimize: true, preserveUrl: false
+        sourceMap: false, minimize: false, preserveUrl: false
       })
     ]
   },
 
-  devServer: {
-    noInfo: true,
-    stats: {
-      chunks: false,
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        commons: {
+          test: /[\\/]node_modules[\\/].*[jt]sx?$/,
+          name: "vendor",
+          chunks: "all"
+        }
+      }
     },
+    minimizer: [
+      new UglifyJsPlugin({
+        cache: true,
+        parallel: true,
+        sourceMap: true
+      }),
+      new OptimizeCSSAssetsPlugin({})
+    ]
   },
 
   plugins: [
-    new ExtractTextPlugin({
-      filename: 'grafana.[name].css',
+    new MiniCssExtractPlugin({
+      filename: "grafana.[name].css"
     }),
     new ngAnnotatePlugin(),
-    new UglifyJSPlugin({
-      sourceMap: true,
-    }),
-    new webpack.DefinePlugin({
-      'process.env': {
-        'NODE_ENV': JSON.stringify('production')
-      }
-    }),
     new HtmlWebpackPlugin({
       filename: path.resolve(__dirname, '../../public/views/index.html'),
       template: path.resolve(__dirname, '../../public/views/index.template.html'),
       inject: 'body',
-      chunks: ['manifest', 'vendor', 'app'],
-    }),
-    new webpack.optimize.CommonsChunkPlugin({
-      names: ['vendor', 'manifest'],
+      chunks: ['vendor', 'app'],
     }),
     function () {
       this.plugin("done", function (stats) {