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
2025-02-25 18:55:37 -06:00 · 2018-06-26 01:28:37 -07:00
parent f83306bb5b
commit 713a87fb5b
11 changed files with 2411 additions and 1024 deletions
--- a/scripts/grunt/options/karma.js
+++ b/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: {
--- a/scripts/webpack/sass.rule.js
+++ b/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: [
-        {
-          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',
+    use: [
+      MiniCssExtractPlugin.loader,
+      {
+        loader: 'css-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 } },
+    ],
  };
-}
-
+};
--- 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,20 +42,23 @@ module.exports = merge(common, {
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
-        use: {
-          loader: 'awesome-typescript-loader',
+        use: [{
+          loader: 'babel-loader',
          options: {
-            useCache: true,
-            useBabel: true,
-            babelOptions: {
-              babelrc: false,
-              plugins: [
-                'syntax-dynamic-import',
-                'react-hot-loader/babel'
-              ]
-            }
+            cacheDirectory: true,
+            babelrc: false,
+            plugins: [
+              'syntax-dynamic-import',
+              'react-hot-loader/babel'
+            ]
+          }
+        },
+        {
+          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',
-            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) {
--- 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;