Use WebpackDevServer (#2594)

quiltdata · Jan 23, 2022 · 2345aaa · 2345aaa
1 parent 1f9d4e8
commit 2345aaa
Show file tree

Hide file tree

Showing 7 changed files with 2,262 additions and 1,194 deletions.
diff --git a/catalog/internals/webpack/webpack.base.js b/catalog/internals/webpack/webpack.base.js
@@ -9,16 +9,22 @@ const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const webpack = require('webpack')
 
+// TODO: use webpack-merge, it's already in node_modules
 module.exports = (options) => ({
   mode: options.mode,
-  entry: options.entry,
+  entry: options.entry || {
+    app: path.join(process.cwd(), 'app/app'), // Start with app/app.js
+    embed: path.join(process.cwd(), 'app/embed'),
+    'embed-debug-harness': path.join(process.cwd(), 'app/embed/debug-harness'),
+  },
   output: {
     // Compile into js/build.js
     path: path.resolve(process.cwd(), 'build'),
     publicPath: '/',
     // Merge with env dependent settings
     ...options.output,
   },
+  devServer: options.devServer,
   optimization: options.optimization,
   module: {
     rules: [

diff --git a/catalog/internals/webpack/webpack.dev.js b/catalog/internals/webpack/webpack.dev.js
@@ -2,25 +2,26 @@ const path = require('path')
 
 const CircularDependencyPlugin = require('circular-dependency-plugin')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
-const webpack = require('webpack')
 
 module.exports = require('./webpack.base')({
   mode: 'development',
 
-  // Add hot reloading in development
-  entry: {
-    app: [
-      'webpack-hot-middleware/client?reload=true',
-      path.join(process.cwd(), 'app/app'), // Start with app/app.js
-    ],
-    embed: [
-      'webpack-hot-middleware/client?reload=true',
-      path.join(process.cwd(), 'app/embed'),
-    ],
-    'embed-debug-harness': [
-      'webpack-hot-middleware/client?reload=true',
-      path.join(process.cwd(), 'app/embed/debug-harness'),
-    ],
+  devServer: {
+    compress: true,
+    headers: { 'Access-Control-Allow-Origin': '*' },
+    // hot: true, // https://github.com/webpack-contrib/webpack-hot-middleware/issues/390
+    port: process.env.PORT || 3000,
+    static: {
+      directory: 'static-dev/',
+    },
+    historyApiFallback: {
+      rewrites: [
+        { from: /^\/__embed$/, to: '/embed.html' },
+        { from: /^\/__embed-debug$/, to: '/embed-debug-harness.html' },
+        { from: /^\/oauth-callback$/, to: '/oauth-callback.html' },
+      ],
+    },
+    watchFiles: ['app/**/*', 'static-dev/*'],
   },
 
   optimization: {
@@ -32,8 +33,6 @@ module.exports = require('./webpack.base')({
   plugins: [
     new CopyWebpackPlugin({ patterns: [{ from: 'static-dev' }] }),
 
-    new webpack.HotModuleReplacementPlugin(), // Tell webpack we want hot reloading
-
     new CircularDependencyPlugin({
       exclude: /a\.js|node_modules/, // exclude node_modules
       failOnError: false, // show a warning when there is a circular dependency

diff --git a/catalog/internals/webpack/webpack.prod.js b/catalog/internals/webpack/webpack.prod.js
@@ -6,13 +6,6 @@ const TerserPlugin = require('terser-webpack-plugin')
 module.exports = require('./webpack.base')({
   mode: 'production',
 
-  // In production, we skip all hot-reloading stuff
-  entry: {
-    app: path.join(process.cwd(), 'app/app'),
-    embed: path.join(process.cwd(), 'app/embed/index'),
-    'embed-debug-harness': path.join(process.cwd(), 'app/embed/debug-harness'),
-  },
-
   // Utilize long-term caching by adding content hashes (not compilation hashes) to compiled assets
   output: {
     filename: '[name].[contenthash].js',