Merge pull request #11652 from grafana/davkal/hmr

Add weback-dev-server with hot/hmr support

scripts/webpack/sass.rule.js

@@ -2,16 +2,16 @@
 
 const ExtractTextPlugin = require("extract-text-webpack-plugin");
 
-module.exports = function(options) {
+module.exports = function (options, extractSass) {
   return {
     test: /\.scss$/,
-    use: ExtractTextPlugin.extract({
+    use: (extractSass || ExtractTextPlugin).extract({
       use: [
         {
           loader: 'css-loader',
           options: {
             importLoaders: 2,
-            url: false,
+            url: options.preserveUrl,
             sourceMap: options.sourceMap,
             minimize: options.minimize,
           }
@@ -23,8 +23,14 @@ module.exports = function(options) {
             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
+        }
+      }]
     })
   };
 }

scripts/webpack/webpack.common.js

@@ -1,5 +1,5 @@
 const path = require('path');
-const {CheckerPlugin} = require('awesome-typescript-loader')
+const { CheckerPlugin } = require('awesome-typescript-loader');
 
 module.exports = {
   target: 'web',
@@ -11,8 +11,8 @@ module.exports = {
   },
   output: {
     path: path.resolve(__dirname, '../../public/build'),
-    filename: '[name].[chunkhash].js',
-    publicPath: "public/build/",
+    filename: '[name].[hash].js',
+    publicPath: "/public/build/",
   },
   resolve: {
     extensions: ['.ts', '.tsx', '.es6', '.js', '.json'],
@@ -28,25 +28,6 @@ module.exports = {
   },
   module: {
     rules: [
-      {
-        test: /\.tsx?$/,
-        enforce: 'pre',
-        exclude: /node_modules/,
-        use: {
-          loader: 'tslint-loader',
-          options: {
-            emitErrors: true,
-            typeCheck: false,
-          }
-        }
-      },
-      {
-        test: /\.tsx?$/,
-        exclude: /node_modules/,
-        use: [
-          { loader: "awesome-typescript-loader" }
-        ]
-      },
       {
         test: require.resolve('jquery'),
         use: [
@@ -64,7 +45,7 @@ module.exports = {
         test: /\.html$/,
         exclude: /index\.template.html/,
         use: [
-          { loader:'ngtemplate-loader?relativeTo=' + (path.resolve(__dirname, '../../public')) + '&prefix=public'},
+          { loader: 'ngtemplate-loader?relativeTo=' + (path.resolve(__dirname, '../../public')) + '&prefix=public' },
           {
             loader: 'html-loader',
             options: {

scripts/webpack/webpack.dev.js

@@ -5,39 +5,118 @@ const common = require('./webpack.common.js');
 const path = require('path');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require("html-webpack-plugin");
+const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
 const ExtractTextPlugin = require("extract-text-webpack-plugin");
-const WebpackCleanupPlugin = require('webpack-cleanup-plugin');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
+const TARGET = process.env.npm_lifecycle_event;
+const HOT = TARGET === 'start';
+
+const extractSass = new ExtractTextPlugin({
+  filename: "grafana.[name].css",
+  disable: HOT
+});
+
+const entries = HOT ? {
+  app: [
+    'webpack-dev-server/client?http://localhost:3333',
+    './public/app/dev.ts',
+  ],
+  vendor: require('./dependencies'),
+} : {
+    app: './public/app/index.ts',
+    dark: './public/sass/grafana.dark.scss',
+    light: './public/sass/grafana.light.scss',
+    vendor: require('./dependencies'),
+  };
+
 module.exports = merge(common, {
   devtool: "cheap-module-source-map",
 
-  entry: {
-    dark: './public/sass/grafana.dark.scss',
-    light: './public/sass/grafana.light.scss',
-    vendor: require('./dependencies'),
+  entry: entries,
+
+  resolve: {
+    extensions: ['.scss', '.ts', '.tsx', '.es6', '.js', '.json', '.svg', '.woff2', '.png'],
+  },
+
+  devServer: {
+    publicPath: '/public/build/',
+    hot: HOT,
+    port: 3333,
+    proxy: {
+      '!/public/build': 'http://localhost:3000'
+    }
   },
 
   module: {
     rules: [
+      {
+        test: /\.tsx?$/,
+        enforce: 'pre',
+        exclude: /node_modules/,
+        use: {
+          loader: 'tslint-loader',
+          options: {
+            emitErrors: true,
+            typeCheck: false,
+          }
+        }
+      },
+      {
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              plugins: [
+                'react-hot-loader/babel',
+              ],
+            },
+          },
+          {
+            loader: 'awesome-typescript-loader',
+            options: {
+              useCache: true,
+            },
+          }
+        ]
+      },
       require('./sass.rule.js')({
-        sourceMap: false, minimize: false
-      })
+        sourceMap: true, minimize: false, preserveUrl: true
+      }, extractSass),
+      {
+        test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
+        loader: 'file-loader'
+      },
+      {
+        test: /\.(png|jpg|gif)$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {}
+          }
+        ]
+      },
     ]
   },
 
   plugins: [
-    new ExtractTextPlugin({ // define where to save the file
-      filename: 'grafana.[name].css',
-      allChunks: true,
-    }),
+    new CleanWebpackPlugin('../public/build', { allowExternal: true }),
+    extractSass,
     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'],
+      alwaysWriteToDisk: HOT
     }),
+    new HtmlWebpackHarddiskPlugin(),
+    new webpack.NamedModulesPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
     new webpack.DefinePlugin({
+      'GRAFANA_THEME': JSON.stringify(process.env.GRAFANA_THEME || 'dark'),
       'process.env': {
         'NODE_ENV': JSON.stringify('development')
       }

scripts/webpack/webpack.prod.js

@@ -20,8 +20,27 @@ module.exports = merge(common, {
 
   module: {
     rules: [
+      {
+        test: /\.tsx?$/,
+        enforce: 'pre',
+        exclude: /node_modules/,
+        use: {
+          loader: 'tslint-loader',
+          options: {
+            emitErrors: true,
+            typeCheck: false,
+          }
+        }
+      },
+      {
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        use: [
+          { loader: "awesome-typescript-loader" }
+        ]
+      },
       require('./sass.rule.js')({
-        sourceMap: false, minimize: true
+        sourceMap: false, minimize: true, preserveUrl: false
       })
     ]
   },
@@ -55,8 +74,8 @@ module.exports = merge(common, {
     new webpack.optimize.CommonsChunkPlugin({
       names: ['vendor', 'manifest'],
     }),
-    function() {
-      this.plugin("done", function(stats) {
+    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

@@ -9,8 +9,16 @@ config = merge(common, {
     'react/lib/ExecutionEnvironment': true,
     'react/lib/ReactContext': true,
   },
-  node: {
-    fs: 'empty'
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        use: [
+          { loader: "awesome-typescript-loader" }
+        ]
+      },
+    ]
   },
   plugins: [
     new webpack.SourceMapDevToolPlugin({