Update webpack-dev-server

package.json

@@ -150,7 +150,7 @@
 		"whybundled": "whybundled client/stats.json",
 		"prewhybundled:server": "NODE_ENV=production CALYPSO_ENV=production EMIT_STATS=withreasons CONCATENATE_MODULES=false yarn run -s build-server",
 		"whybundled:server": "whybundled client/stats-server.json",
-		"composite-checkout-demo": "webpack-dev-server --config ./packages/composite-checkout/webpack.config.demo.js --mode development",
+		"composite-checkout-demo": "webpack-dev-server --config ./packages/composite-checkout/webpack.config.demo.js",
 		"components:storybook:start": "start-storybook -c packages/components/.storybook",
 		"search:storybook:start": "start-storybook -c packages/search/.storybook"
 	},
@@ -297,7 +297,7 @@
 		"webpack-bundle-analyzer": "^4.3.0",
 		"webpack-cli": "^4.3.1",
 		"webpack-dev-middleware": "^4.0.2",
-		"webpack-dev-server": "^3.11.0",
+		"webpack-dev-server": "^4.0.0-beta.0",
 		"whybundled": "^1.4.2",
 		"wpcom": "^6.0.0",
 		"yargs": "^15.3.1"

packages/composite-checkout/package.json

@@ -50,6 +50,7 @@
 		"react": "^16.12.0"
 	},
 	"devDependencies": {
+		"@automattic/calypso-build": "^7.0.0",
 		"@automattic/calypso-polyfills": "^1.0.0",
 		"@testing-library/jest-dom": "^5.9.0",
 		"@testing-library/react": "^10.0.5",

packages/composite-checkout/webpack.config.demo.js

@@ -1,37 +1,38 @@
 const path = require( 'path' );
 const webpack = require( 'webpack' );
+const TranspileConfig = require( '@automattic/calypso-build/webpack/transpile' );
 
 module.exports = {
 	entry: './packages/composite-checkout/demo/index.js',
 	mode: 'development',
 	module: {
 		rules: [
-			{
-				test: /\.(js|jsx)$/,
-				exclude: /(node_modules|bower_components)/,
-				loader: 'babel-loader',
-				options: { presets: [ '@babel/env' ] },
-			},
+			TranspileConfig.loader( {
+				workerCount: 1,
+				configFile: path.resolve( 'babel.config.js' ),
+				exclude: /node_modules\//,
+			} ),
 			{
 				test: /\.css$/,
 				use: [ 'style-loader', 'css-loader' ],
 			},
 		],
 	},
 	resolve: {
-		extensions: [ '*', '.js', '.jsx' ],
+		extensions: [ '.json', '.js', '.jsx', '.ts', '.tsx' ],
 		mainFields: [ 'browser', 'calypso:src', 'module', 'main' ],
+		alias: {
+			'@automattic/composite-checkout': path.join( __dirname, 'src/public-api.ts' ),
+		},
 	},
 	output: {
 		path: path.resolve( __dirname, '/dist/' ),
 		publicPath: '/dist/',
 		filename: 'bundle.js',
 	},
 	devServer: {
-		contentBase: path.join( __dirname, '/demo/' ),
+		static: path.join( __dirname, '/demo/' ),
 		port: 3000,
-		publicPath: 'http://localhost:3000/dist/',
-		hotOnly: true,
 	},
 	plugins: [ new webpack.HotModuleReplacementPlugin() ],
 };