Split webpack dev config into dev and hot

Motivation: * too many conditionals for config, better to be explicit * different priorities: faster build for hot mode * working SCSS sources for styles in hot mode The biggest differences: * removed linter from TS loader in hot (should be editor or precommit or responsibility) * simplified styles loading * hot needs more extensions to resolve * removed commons chunking for hot * removed devServer from dev Reduced HMR time from 8s to 4s on my machine.
2018-05-28 13:49:15 +02:00
parent 5a96863eed
commit ebe8e62bd5
3 changed files with 106 additions and 67 deletions
@@ -0,0 +1,91 @@
+'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 HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+
+module.exports = merge(common, {
+  entry: {
+    app: [
+      'webpack-dev-server/client?http://localhost:3333',
+      './public/app/dev.ts',
+    ],
+  },
+
+  output: {
+    path: path.resolve(__dirname, '../../public/build'),
+    filename: '[name].[hash].js',
+    publicPath: "/public/build/",
+  },
+
+  resolve: {
+    extensions: ['.scss', '.ts', '.tsx', '.es6', '.js', '.json', '.svg', '.woff2', '.png'],
+  },
+
+  devServer: {
+    publicPath: '/public/build/',
+    hot: true,
+    port: 3333,
+    proxy: {
+      '!/public/build': 'http://localhost:3000'
+    }
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'awesome-typescript-loader',
+          options: {
+            useCache: true,
+            useBabel: true,
+            babelOptions: {
+              babelrc: false,
+              plugins: [
+                'syntax-dynamic-import',
+                'react-hot-loader/babel'
+              ]
+            }
+          },
+        }
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          "style-loader", // creates style nodes from JS strings
+          "css-loader", // translates CSS into CommonJS
+          "sass-loader" // compiles Sass to CSS
+        ]
+      },
+      {
+        test: /\.(png|jpg|gif|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
+        loader: 'file-loader'
+      },
+    ]
+  },
+
+  plugins: [
+    new CleanWebpackPlugin('../public/build', { allowExternal: true }),
+    new HtmlWebpackPlugin({
+      filename: path.resolve(__dirname, '../../public/views/index.html'),
+      template: path.resolve(__dirname, '../../public/views/index.template.html'),
+      inject: 'body',
+      alwaysWriteToDisk: true
+    }),
+    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')
+      }
+    }),
+  ]
+});