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
7 years ago · 713a87fb5b
parent f83306bb5b
commit 713a87fb5b
11 changed files with 2413 additions and 1026 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@ -88,7 +88,7 @@ jobs:

  test-frontend:
    docker:
-      - image: circleci/node:6.11.4
+      - image: circleci/node:8
    steps:
      - checkout
      - run:
--- a/karma.conf.js
+++ b/karma.conf.js
@ -19,8 +19,8 @@ module.exports = function(config) {
    },

    webpack: webpackTestConfig,
-    webpackServer: {
-      noInfo: true, // please don't spam the console when running in karma!
+    webpackMiddleware: {
+      stats: 'minimal',
    },

    // list of files to exclude
--- a/package.json
+++ b/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",
-    "start": "webpack-dev-server --progress --colors --config scripts/webpack/webpack.hot.js",
-    "watch": "webpack --progress --colors --watch --config scripts/webpack/webpack.dev.js",
+    "dev": "webpack --progress --colors --mode development --config scripts/webpack/webpack.dev.js",
+    "start": "webpack-dev-server --progress --colors --mode development --config scripts/webpack/webpack.hot.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-native-dragdrop": "^1.2.2",
+    "angular-bindonce": "0.3.1",
+    "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"
--- a/scripts/grunt/options/karma.js
+++ b/scripts/grunt/options/karma.js
@ -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: {
--- a/scripts/webpack/sass.rule.js
+++ b/scripts/webpack/sass.rule.js
@ -1,12 +1,12 @@
 '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: [
+      MiniCssExtractPlugin.loader,
      {
        loader: 'css-loader',
        options: {
@ -14,24 +14,16 @@ module.exports = function (options, extractSass) {
          url: options.preserveUrl,
          sourceMap: options.sourceMap,
          minimize: options.minimize,
-          }
+        },
      },
      {
        loader: 'postcss-loader',
        options: {
          sourceMap: options.sourceMap,
-            config: { path: __dirname + '/postcss.config.js' }
-          }
+          config: { path: __dirname + '/postcss.config.js' },
+        },
      },
-        { loader: 'sass-loader', options: { sourceMap: options.sourceMap } }
+      { loader: 'sass-loader', options: { sourceMap: options.sourceMap } },
    ],
-      fallback: [{
-        loader: 'style-loader',
-        options: {
-          sourceMap: true
-        }
-      }]
-    })
  };
-}
-
+};
--- a/scripts/webpack/webpack.common.js
+++ b/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,
+    }),
  ]
 };
--- a/scripts/webpack/webpack.dev.js
+++ b/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 extractSass = new ExtractTextPlugin({
-  filename: "grafana.[name].css"
-});
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

 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')({
-        sourceMap: true, minimize: false, preserveUrl: false
-      }, extractSass),
+      },
+      require('./sass.rule.js')({ sourceMap: false, minimize: false, preserveUrl: false }),
      {
        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
    // })
--- a/scripts/webpack/webpack.hot.js
+++ b/scripts/webpack/webpack.hot.js
@ -42,12 +42,10 @@ module.exports = merge(common, {
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
-        use: {
-          loader: 'awesome-typescript-loader',
+        use: [{
+          loader: 'babel-loader',
          options: {
-            useCache: true,
-            useBabel: true,
-            babelOptions: {
+            cacheDirectory: true,
            babelrc: false,
            plugins: [
              'syntax-dynamic-import',
@ -55,7 +53,12 @@ module.exports = merge(common, {
            ]
          }
        },
-        }
+        {
+          loader: 'ts-loader',
+          options: {
+            transpileOnly: true
+          },
+        }],
      },
      {
        test: /\.scss$/,
--- a/scripts/webpack/webpack.prod.js
+++ b/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',
+        use: {
+          loader: 'ts-loader',
          options: {
-              errorsAsWarnings: false,
+            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) {
--- a/scripts/webpack/webpack.test.js
+++ b/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: [
-          { loader: "awesome-typescript-loader" }
-        ]
+        use: {
+          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;
--- a/yarn.lock
+++ b/yarn.lock