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

.circleci/config.yml

@@ -88,7 +88,7 @@ jobs:
 
   test-frontend:
     docker:
-      - image: circleci/node:6.11.4
+      - image: circleci/node:8
     steps:
       - checkout
       - run:

karma.conf.js

@@ -19,8 +19,8 @@ module.exports = function(config) {
     },
 
     webpack: webpackTestConfig,
-    webpackServer: {
+    webpackMiddleware: {
-      noInfo: true, // please don't spam the console when running in karma!
+      stats: 'minimal',
     },
 
     // list of files to exclude

package.json

@@ -16,11 +16,11 @@
     "@types/node": "^8.0.31",
     "@types/react": "^16.0.25",
     "@types/react-dom": "^16.0.3",
-    "angular-mocks": "^1.6.6",
+    "angular-mocks": "1.6.6",
     "autoprefixer": "^6.4.0",
-    "awesome-typescript-loader": "^4.0.0",
     "axios": "^0.17.1",
     "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.4",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-preset-es2015": "^6.24.1",
     "clean-webpack-plugin": "^0.1.19",
@@ -32,8 +32,9 @@
     "es6-shim": "^0.35.3",
     "expect.js": "~0.2.0",
     "expose-loader": "^0.7.3",
-    "extract-text-webpack-plugin": "^3.0.0",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "file-loader": "^1.1.11",
+    "fork-ts-checker-webpack-plugin": "^0.4.1",
     "gaze": "^1.1.2",
     "glob": "~7.0.0",
     "grunt": "1.0.1",
@@ -56,7 +57,7 @@
     "grunt-webpack": "^3.0.2",
     "html-loader": "^0.5.1",
     "html-webpack-harddisk-plugin": "^0.2.0",
-    "html-webpack-plugin": "^2.30.1",
+    "html-webpack-plugin": "^3.2.0",
     "husky": "^0.14.3",
     "jest": "^22.0.4",
     "jshint-stylish": "~2.2.1",
@@ -67,7 +68,7 @@
     "karma-phantomjs-launcher": "1.0.4",
     "karma-sinon": "^1.0.5",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^2.0.4",
+    "karma-webpack": "^3.0.0",
     "lint-staged": "^6.0.0",
     "load-grunt-tasks": "3.5.2",
     "mobx-react-devtools": "^4.2.15",
@@ -89,21 +90,24 @@
     "style-loader": "^0.21.0",
     "systemjs": "0.20.19",
     "systemjs-plugin-css": "^0.1.36",
+    "ts-loader": "^4.3.0",
     "ts-jest": "^22.4.6",
     "tslint": "^5.8.0",
     "tslint-loader": "^3.5.3",
     "typescript": "^2.6.2",
-    "webpack": "^3.10.0",
+    "webpack": "^4.8.0",
     "webpack-bundle-analyzer": "^2.9.0",
     "webpack-cleanup-plugin": "^0.5.1",
-    "webpack-dev-server": "2.11.1",
+    "fork-ts-checker-webpack-plugin": "^0.4.2",
+    "webpack-cli": "^2.1.4",
+    "webpack-dev-server": "^3.1.0",
     "webpack-merge": "^4.1.0",
     "zone.js": "^0.7.2"
   },
   "scripts": {
-    "dev": "webpack --progress --colors --config scripts/webpack/webpack.dev.js",
+    "dev": "webpack --progress --colors --mode development --config scripts/webpack/webpack.dev.js",
-    "start": "webpack-dev-server --progress --colors --config scripts/webpack/webpack.hot.js",
+    "start": "webpack-dev-server --progress --colors --mode development --config scripts/webpack/webpack.hot.js",
-    "watch": "webpack --progress --colors --watch --config scripts/webpack/webpack.dev.js",
+    "watch": "webpack --progress --colors --watch --mode development --config scripts/webpack/webpack.dev.js",
     "build": "grunt build",
     "test": "grunt test",
     "test:coverage": "grunt test --coverage=true",
@@ -135,8 +139,8 @@
   "license": "Apache-2.0",
   "dependencies": {
     "angular": "1.6.6",
-    "angular-bindonce": "^0.3.1",
+    "angular-bindonce": "0.3.1",
-    "angular-native-dragdrop": "^1.2.2",
+    "angular-native-dragdrop": "1.2.2",
     "angular-route": "1.6.6",
     "angular-sanitize": "1.6.6",
     "babel-polyfill": "^6.26.0",
@@ -151,12 +155,14 @@
     "immutable": "^3.8.2",
     "jquery": "^3.2.1",
     "lodash": "^4.17.4",
+    "mini-css-extract-plugin": "^0.4.0",
     "mobx": "^3.4.1",
     "mobx-react": "^4.3.5",
     "mobx-state-tree": "^1.3.1",
     "moment": "^2.18.1",
     "mousetrap": "^1.6.0",
     "mousetrap-global-bind": "^1.1.0",
+    "optimize-css-assets-webpack-plugin": "^4.0.2",
     "prismjs": "^1.6.0",
     "prop-types": "^15.6.0",
     "react": "^16.2.0",
@@ -175,7 +181,8 @@
     "slate-react": "^0.12.4",
     "tether": "^1.4.0",
     "tether-drop": "https://github.com/torkelo/drop/tarball/master",
-    "tinycolor2": "^1.4.1"
+    "tinycolor2": "^1.4.1",
+    "uglifyjs-webpack-plugin": "^1.2.7"
   },
   "resolutions": {
     "caniuse-db": "1.0.30000772"

scripts/grunt/options/karma.js

@@ -1,4 +1,4 @@
-module.exports = function(config) {
+module.exports = function (config) {
   'use strict';
 
   return {
@@ -10,7 +10,10 @@ module.exports = function(config) {
     debug: {
       configFile: 'karma.conf.js',
       singleRun: false,
-      browsers: ['Chrome']
+      browsers: ['Chrome'],
+      mime: {
+        'text/x-typescript': ['ts', 'tsx']
+      },
     },
 
     test: {

scripts/webpack/sass.rule.js

@@ -1,37 +1,29 @@
 'use strict';
 
-const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
-module.exports = function (options, extractSass) {
+module.exports = function(options) {
   return {
     test: /\.scss$/,
-    use: (extractSass || ExtractTextPlugin).extract({
+    use: [
-      use: [
+      MiniCssExtractPlugin.loader,
-        {
+      {
-          loader: 'css-loader',
+        loader: 'css-loader',
-          options: {
-            importLoaders: 2,
-            url: options.preserveUrl,
-            sourceMap: options.sourceMap,
-            minimize: options.minimize,
-          }
-        },
-        {
-          loader: 'postcss-loader',
-          options: {
-            sourceMap: options.sourceMap,
-            config: { path: __dirname + '/postcss.config.js' }
-          }
-        },
-        { loader: 'sass-loader', options: { sourceMap: options.sourceMap } }
-      ],
-      fallback: [{
-        loader: 'style-loader',
         options: {
-          sourceMap: true
+          importLoaders: 2,
-        }
+          url: options.preserveUrl,
-      }]
+          sourceMap: options.sourceMap,
-    })
+          minimize: options.minimize,
+        },
+      },
+      {
+        loader: 'postcss-loader',
+        options: {
+          sourceMap: options.sourceMap,
+          config: { path: __dirname + '/postcss.config.js' },
+        },
+      },
+      { loader: 'sass-loader', options: { sourceMap: options.sourceMap } },
+    ],
   };
-}
+};
-

scripts/webpack/webpack.common.js

@@ -1,5 +1,5 @@
 const path = require('path');
-const { CheckerPlugin } = require('awesome-typescript-loader');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
 module.exports = {
   target: 'web',
@@ -61,6 +61,8 @@ module.exports = {
     ]
   },
   plugins: [
-    new CheckerPlugin(),
+    new ForkTsCheckerWebpackPlugin({
+      checkSyntacticErrors: true,
+    }),
   ]
 };

scripts/webpack/webpack.dev.js

@@ -7,20 +7,17 @@ const webpack = require('webpack');
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const ExtractTextPlugin = require("extract-text-webpack-plugin");
 const CleanWebpackPlugin = require('clean-webpack-plugin');
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-
+// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-const extractSass = new ExtractTextPlugin({
-  filename: "grafana.[name].css"
-});
 
 module.exports = merge(common, {
   devtool: "cheap-module-source-map",
+  mode: 'development',
 
   entry: {
     app: './public/app/index.ts',
     dark: './public/sass/grafana.dark.scss',
     light: './public/sass/grafana.light.scss',
-    vendor: require('./dependencies'),
   },
 
   output: {
@@ -48,15 +45,13 @@ module.exports = merge(common, {
         test: /\.tsx?$/,
         exclude: /node_modules/,
         use: {
-          loader: 'awesome-typescript-loader',
+          loader: 'ts-loader',
           options: {
-            useCache: true,
+            transpileOnly: true
           },
-        }
+        },
       },
-      require('./sass.rule.js')({
+      require('./sass.rule.js')({ sourceMap: false, minimize: false, preserveUrl: false }),
-        sourceMap: true, minimize: false, preserveUrl: false
-      }, extractSass),
       {
         test: /\.(png|jpg|gif|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
         loader: 'file-loader'
@@ -64,9 +59,30 @@ module.exports = merge(common, {
     ]
   },
 
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        manifest: {
+          chunks: "initial",
+          test: "vendor",
+          name: "vendor",
+          enforce: true
+        },
+        vendor: {
+          chunks: "initial",
+          test: "vendor",
+          name: "vendor",
+          enforce: true
+        }
+      }
+    }
+  },
+
   plugins: [
     new CleanWebpackPlugin('../../public/build', { allowExternal: true }),
-    extractSass,
+    new MiniCssExtractPlugin({
+      filename: "grafana.[name].css"
+    }),
     new HtmlWebpackPlugin({
       filename: path.resolve(__dirname, '../../public/views/index.html'),
       template: path.resolve(__dirname, '../../public/views/index.template.html'),
@@ -80,9 +96,6 @@ module.exports = merge(common, {
         'NODE_ENV': JSON.stringify('development')
       }
     }),
-    new webpack.optimize.CommonsChunkPlugin({
-      names: ['vendor', 'manifest'],
-    }),
     // new BundleAnalyzerPlugin({
     //   analyzerPort: 8889
     // })

scripts/webpack/webpack.hot.js

@@ -42,20 +42,23 @@ module.exports = merge(common, {
       {
         test: /\.tsx?$/,
         exclude: /node_modules/,
-        use: {
+        use: [{
-          loader: 'awesome-typescript-loader',
+          loader: 'babel-loader',
           options: {
-            useCache: true,
+            cacheDirectory: true,
-            useBabel: true,
+            babelrc: false,
-            babelOptions: {
+            plugins: [
-              babelrc: false,
+              'syntax-dynamic-import',
-              plugins: [
+              'react-hot-loader/babel'
-                'syntax-dynamic-import',
+            ]
-                'react-hot-loader/babel'
+          }
-              ]
+        },
-            }
+        {
+          loader: 'ts-loader',
+          options: {
+            transpileOnly: true
           },
-        }
+        }],
       },
       {
         test: /\.scss$/,

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: [
+        use: {
-          {
+          loader: 'ts-loader',
-            loader: 'awesome-typescript-loader',
+          options: {
-            options: {
+            transpileOnly: true
-              errorsAsWarnings: false,
-            },
           },
-        ]
+        },
       },
       require('./sass.rule.js')({
-        sourceMap: false, minimize: true, preserveUrl: false
+        sourceMap: false, minimize: false, preserveUrl: false
       })
     ]
   },
 
-  devServer: {
+  optimization: {
-    noInfo: true,
+    splitChunks: {
-    stats: {
+      cacheGroups: {
-      chunks: false,
+        commons: {
+          test: /[\\/]node_modules[\\/].*[jt]sx?$/,
+          name: "vendor",
+          chunks: "all"
+        }
+      }
     },
+    minimizer: [
+      new UglifyJsPlugin({
+        cache: true,
+        parallel: true,
+        sourceMap: true
+      }),
+      new OptimizeCSSAssetsPlugin({})
+    ]
   },
 
   plugins: [
-    new ExtractTextPlugin({
+    new MiniCssExtractPlugin({
-      filename: 'grafana.[name].css',
+      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'],
+      chunks: ['vendor', 'app'],
-    }),
-    new webpack.optimize.CommonsChunkPlugin({
-      names: ['vendor', 'manifest'],
     }),
     function () {
       this.plugin("done", function (stats) {

scripts/webpack/webpack.test.js

@@ -3,29 +3,36 @@ const merge = require('webpack-merge');
 const common = require('./webpack.common.js');
 
 config = merge(common, {
+  mode: 'development',
   devtool: 'cheap-module-source-map',
+
   externals: {
     'react/addons': true,
     'react/lib/ExecutionEnvironment': true,
     'react/lib/ReactContext': true,
   },
+
   module: {
     rules: [
       {
         test: /\.tsx?$/,
         exclude: /node_modules/,
-        use: [
+        use: {
-          { loader: "awesome-typescript-loader" }
+          loader: 'ts-loader',
-        ]
+          options: {
+            transpileOnly: true,
+          },
+        },
       },
-    ]
+    ],
   },
+
   plugins: [
     new webpack.SourceMapDevToolPlugin({
       filename: null, // if no value is provided the sourcemap is inlined
-      test: /\.(ts|js)($|\?)/i // process .js and .ts files only
+      test: /\.(ts|js)($|\?)/i, // process .js and .ts files only
     }),
-  ]
+  ],
 });
 
 module.exports = config;