Webpack (#9391)

* webpack poc, this is not going to work for plugins, dam

* tech: webpack and systemjs for plugins starting to work

* tech: webpack and systemjs combo starting to work

* tech: webpack + karma tests progress

* tech: webpack + karma progress

* tech: working on tests

* tech: webpack

* tech: webpack + karma, all tests pass

* tech: webpack + karma, all tests pass

* tech: webpack all tests pass

* webpack: getting closer

* tech: webpack progress

* webpack: further build refinements

* webpack: ng annotate fixes

* webpack: optimized build fix

* tech: minor fix for elasticsearch

* tech: webpack + ace editor

* tech: restored lodash move mixin compatability

* tech: added enzyme react test and upgraded to react v16

* tech: package version fix

* tech: added testdata to built in bundle

* webpack: sass progress

* tech: prod & dev build is working for the sass

* tech: clean up unused grunt stuff and moved to scripts folder

* tech: added vendor and manifest chunks, updated readme and docs

* tech: webpack finishing touches

scripts/webpack/postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    'autoprefixer': {},
+    'postcss-reporter': {},
+    'postcss-browser-reporter': {},
+  }
+}

scripts/webpack/sass.rule.js

@@ -0,0 +1,31 @@
+'use strict';
+
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+
+module.exports = function(options) {
+  return {
+    test: /\.scss$/,
+    use: ExtractTextPlugin.extract({
+      use: [
+        {
+          loader: 'css-loader',
+          options: {
+            importLoaders: 2,
+            url: false,
+            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

@@ -0,0 +1,87 @@
+const path = require('path');
+const {CheckerPlugin} = require('awesome-typescript-loader')
+
+module.exports = {
+  target: 'web',
+  stats: {
+    children: false
+  },
+  entry: {
+    app: './public/app/index.ts',
+  },
+  output: {
+    path: path.resolve(__dirname, '../../public/build'),
+    filename: '[name].[chunkhash].js',
+    publicPath: "public/build/",
+  },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.es6', '.js', '.json'],
+    alias: {
+    },
+    modules: [
+      path.resolve('public'),
+      path.resolve('node_modules')
+    ],
+  },
+  node: {
+    fs: 'empty',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(ts|tsx)$/,
+        enforce: 'pre',
+        exclude: /node_modules/,
+        use: {
+          loader: 'tslint-loader',
+          options: {
+            emitErrors: true
+          }
+        }
+      },
+      {
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        use: [
+          { loader: "awesome-typescript-loader" }
+        ]
+      },
+      {
+        test: require.resolve('jquery'),
+        use: [
+          {
+            loader: 'expose-loader',
+            query: 'jQuery'
+          },
+          {
+            loader: 'expose-loader',
+            query: '$'
+          }
+        ]
+      },
+      // {
+      //   test   : /\.(ico|png|cur|jpg|ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
+      //   loader : 'file-loader',
+      // },
+      {
+        test: /\.html$/,
+        exclude: /index\.template.html/,
+        use: [
+          { loader:'ngtemplate-loader?relativeTo=' + (path.resolve(__dirname, '../../public')) + '&prefix=public'},
+          {
+            loader: 'html-loader',
+            options: {
+              attrs: [],
+              minimize: true,
+              removeComments: false,
+              collapseWhitespace: false
+            }
+          }
+        ]
+      }
+    ]
+  },
+  plugins: [
+    new CheckerPlugin(),
+  ]
+};

scripts/webpack/webpack.dev.js

@@ -0,0 +1,54 @@
+'use strict';
+
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
+const path = require('path');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const WebpackCleanupPlugin = require('webpack-cleanup-plugin');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const pkg = require('../../package.json');
+let dependencies = Object.keys(pkg.dependencies);
+
+module.exports = merge(common, {
+  devtool: "source-map",
+
+  entry: {
+    dark: './public/sass/grafana.dark.scss',
+    light: './public/sass/grafana.light.scss',
+    vendor: dependencies,
+  },
+
+  module: {
+    rules: [
+      require('./sass.rule.js')({
+        sourceMap: true, minimize: false
+      })
+    ]
+  },
+
+  plugins: [
+    new ExtractTextPlugin({ // define where to save the file
+      filename: 'grafana.[name].css',
+    }),
+    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.DefinePlugin({
+      'process.env': {
+        'NODE_ENV': JSON.stringify('development')
+      }
+    }),
+    new webpack.optimize.CommonsChunkPlugin({
+      names: ['vendor', 'manifest'],
+    }),
+    new WebpackCleanupPlugin(),
+    // new BundleAnalyzerPlugin({
+    //   analyzerPort: 8889
+    // })
+  ]
+});

scripts/webpack/webpack.prod.js

@@ -0,0 +1,62 @@
+'use strict';
+
+const merge = require('webpack-merge');
+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 pkg = require('../../package.json');
+let dependencies = Object.keys(pkg.dependencies);
+
+module.exports = merge(common, {
+  devtool: "source-map",
+
+  entry: {
+    dark: './public/sass/grafana.dark.scss',
+    light: './public/sass/grafana.light.scss',
+    vendor: dependencies,
+  },
+
+  module: {
+    rules: [
+      require('./sass.rule.js')({
+        sourceMap: false, minimize: true
+      })
+    ]
+  },
+
+  plugins: [
+    new ExtractTextPlugin({
+      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'],
+    }),
+    function() {
+      this.plugin("done", function(stats) {
+        if (stats.compilation.errors && stats.compilation.errors.length) {
+          console.log(stats.compilation.errors);
+          process.exit(1);
+        }
+      });
+    }
+  ]
+});

scripts/webpack/webpack.test.js

@@ -0,0 +1,23 @@
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+config = merge(common, {
+  devtool: 'inline-source-map',
+  externals: {
+    'react/addons': true,
+    'react/lib/ExecutionEnvironment': true,
+    'react/lib/ReactContext': true,
+  },
+  node: {
+    fs: 'empty'
+  },
+  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
+    })
+  ]
+});
+
+module.exports = config;