refactor: rename plugins

packages/webpack5/src/configuration/base.ts

@@ -39,7 +39,7 @@ export default function (env: IWebpackEnv): Config {
 	// set up ts support
 	config.module
 		.rule('ts')
-		.test(/\.ts$/)
+		.test([/\.ts$/])
 		.use('ts-loader')
 		.loader('ts-loader')
 		.options({
@@ -84,7 +84,7 @@ export default function (env: IWebpackEnv): Config {
 		.loader('scss-loader');
 
 	// items to clean
-	config.plugin('clean').use(CleanWebpackPlugin, [
+	config.plugin('CleanWebpackPlugin').use(CleanWebpackPlugin, [
 		{
 			cleanOnceBeforeBuildPatterns: [`${distPath}/**/*`],
 			verbose: true,
@@ -92,7 +92,7 @@ export default function (env: IWebpackEnv): Config {
 	]);
 
 	// todo: refine defaults
-	config.plugin('define').use(DefinePlugin, [
+	config.plugin('DefinePlugin').use(DefinePlugin, [
 		{
 			'global.NS_WEBPACK': true,
 			'global.isAndroid': platform === WebpackPlatform.android,
@@ -104,14 +104,14 @@ export default function (env: IWebpackEnv): Config {
 	// todo: we should probably move away from CopyWebpackPlugin
 	// it has many issues we can solve by simply copying files **before** the build even starts
 	// this is just a temp inline plugin that does nothing while building out the configs.
-	config.plugin('copy').use(function CopyPluginTemp() {}, [
+	config.plugin('CopyWebpackPlugin').use(function CopyPluginTemp() {}, [
 		{
 			patterns: [],
 		},
 	]);
 
 	// add the WatchStateLogger plugin used to notify the CLI of build state
-	config.plugin('watch-state-logger').use(WatchStateLoggerPlugin);
+	config.plugin('WatchStateLoggerPlugin').use(WatchStateLoggerPlugin);
 
 	return config;
 }

packages/webpack5/src/configuration/react.ts

@@ -16,7 +16,7 @@ export default function (env: IWebpackEnv): Config {
 
 	config.module
 		.rule('ts')
-		.test(/\.(ts|tsx)$/)
+		.test([...config.module.rule('ts').get('test'), /\.tsx$/])
 		.use('react-hmr')
 		.loader('babel-loader')
 		.before('ts-loader')
@@ -26,7 +26,7 @@ export default function (env: IWebpackEnv): Config {
 			plugins: ['react-refresh/babel'],
 		});
 
-	config.plugin('define').tap((args) => {
+	config.plugin('DefinePlugin').tap((args) => {
 		args[0] = merge(args[0], {
 			/** For various libraries in the React ecosystem. */
 			__DEV__: production ? 'false' : 'true',
@@ -41,5 +41,22 @@ export default function (env: IWebpackEnv): Config {
 		return args;
 	});
 
+	// todo: conditional + env flag to forceEnable?
+	config.plugin('ReactRefreshWebpackPlugin').use(function ReactRefreshWebpackPlugin() {}, [
+		{
+			/**
+			 * Maybe one day we'll implement an Error Overlay, but the work involved is too daunting for now.
+			 * @see https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/79#issuecomment-644324557
+			 */
+			overlay: false,
+			/**
+			 * If you (temporarily) want to enable HMR on a production build:
+			 *   1) Set `forceEnable` to `true`
+			 *   2) Remove the `!production` condition on `tsxRule` to ensure that babel-loader gets used.
+			 */
+			forceEnable: false,
+		},
+	]);
+
 	return config;
 }

packages/webpack5/src/configuration/vue.ts

@@ -36,7 +36,7 @@ export default function (env: IWebpackEnv): Config {
 		});
 
 	// add VueLoaderPlugin
-	config.plugin('vue').use(VueLoaderPlugin);
+	config.plugin('VueLoaderPlugin').use(VueLoaderPlugin);
 
 	// add an alias for vue, since some plugins may try to import it
 	config.resolve.alias.set('vue', 'nativescript-vue');