fix: watch close (#401)

.changeset/clean-ravens-film.md

@@ -0,0 +1,5 @@
+---
+"10up-toolkit": patch
+---
+
+Fix: watch close when using modules

packages/toolkit/scripts/start.js

@@ -26,15 +26,18 @@ if (hasWebpackConfig()) {
 	configPath = fromProjectRoot('webpack.config.js');
 }
 
+let server;
+let compiler;
+
 const runWebpack = () => {
 	const config = require(configPath);
-	const compiler = webpack(config);
+	compiler = webpack(config);
 
 	const { devServer } = config;
 
 	if (devServer) {
 		const devServerOptions = { ...devServer, host: '127.0.0.1', open: false };
-		const server = new WebpackDevServer(devServerOptions, compiler);
+		server = new WebpackDevServer(devServerOptions, compiler);
 
 		server.start();
 	} else {
@@ -52,13 +55,6 @@ const runWebpack = () => {
 const hot = hasArgInCLI('--hot');
 
 if (hot) {
-	process.on('SIGINT', () => {
-		// when gracefully leaving hot mode, clean up dist folder.
-		// this avoids leaving js code with the fast refresh instrumentation and thus reducing confusion
-		console.log('\n10up-toolkit: Cleaning up dist folder...');
-
-		fs.rmSync(fromProjectRoot('dist'), { recursive: true, force: true });
-	});
 	// compile the fast refresh bundle
 	const config = require(fromConfigRoot('webpack-fast-refresh.config.js'));
 	const compiler = webpack(config);
@@ -78,3 +74,19 @@ if (hot) {
 } else {
 	runWebpack();
 }
+
+process.on('SIGINT', () => {
+	if (server) {
+		server.close();
+	}
+
+	compiler.close();
+
+	if (hot) {
+		// when gracefully leaving hot mode, clean up dist folder.
+		// this avoids leaving js code with the fast refresh instrumentation and thus reducing confusion
+		console.log('\n10up-toolkit: Cleaning up dist folder...');
+
+		fs.rmSync(fromProjectRoot('dist'), { recursive: true, force: true });
+	}
+});