refactor: rename plugins

packages/webpack5/__tests__/configuration/__snapshots__/react.spec.ts.snap

@@ -25,7 +25,10 @@ exports[`react configuration for android 1`] = `
     rules: [
       /* config.module.rule('ts') */
       {
-        test: /\\\\.(ts|tsx)$/,
+        test: [
+          /\\\\.ts$/,
+          /\\\\.tsx$/
+        ],
         use: [
           /* config.module.rule('ts').use('react-hmr') */
           {
@@ -94,7 +97,7 @@ exports[`react configuration for android 1`] = `
     ]
   },
   plugins: [
-    /* config.plugin('clean') */
+    /* config.plugin('CleanWebpackPlugin') */
     new CleanWebpackPlugin(
       {
         cleanOnceBeforeBuildPatterns: [
@@ -103,7 +106,7 @@ exports[`react configuration for android 1`] = `
         verbose: true
       }
     ),
-    /* config.plugin('define') */
+    /* config.plugin('DefinePlugin') */
     new DefinePlugin(
       {
         'global.NS_WEBPACK': true,
@@ -115,14 +118,21 @@ exports[`react configuration for android 1`] = `
         'process.env.NODE_ENV': '\\"development\\"'
       }
     ),
-    /* config.plugin('copy') */
+    /* config.plugin('CopyWebpackPlugin') */
     new CopyPluginTemp(
       {
         patterns: []
       }
     ),
-    /* config.plugin('watch-state-logger') */
+    /* config.plugin('WatchStateLoggerPlugin') */
-    new WatchStateLoggerPlugin()
+    new WatchStateLoggerPlugin(),
+    /* config.plugin('ReactRefreshWebpackPlugin') */
+    new ReactRefreshWebpackPlugin(
+      {
+        overlay: false,
+        forceEnable: false
+      }
+    )
   ],
   entry: {
     bundle: [
@@ -157,7 +167,10 @@ exports[`react configuration for ios 1`] = `
     rules: [
       /* config.module.rule('ts') */
       {
-        test: /\\\\.(ts|tsx)$/,
+        test: [
+          /\\\\.ts$/,
+          /\\\\.tsx$/
+        ],
         use: [
           /* config.module.rule('ts').use('react-hmr') */
           {
@@ -226,7 +239,7 @@ exports[`react configuration for ios 1`] = `
     ]
   },
   plugins: [
-    /* config.plugin('clean') */
+    /* config.plugin('CleanWebpackPlugin') */
     new CleanWebpackPlugin(
       {
         cleanOnceBeforeBuildPatterns: [
@@ -235,7 +248,7 @@ exports[`react configuration for ios 1`] = `
         verbose: true
       }
     ),
-    /* config.plugin('define') */
+    /* config.plugin('DefinePlugin') */
     new DefinePlugin(
       {
         'global.NS_WEBPACK': true,
@@ -247,14 +260,21 @@ exports[`react configuration for ios 1`] = `
         'process.env.NODE_ENV': '\\"development\\"'
       }
     ),
-    /* config.plugin('copy') */
+    /* config.plugin('CopyWebpackPlugin') */
     new CopyPluginTemp(
       {
         patterns: []
       }
     ),
-    /* config.plugin('watch-state-logger') */
+    /* config.plugin('WatchStateLoggerPlugin') */
-    new WatchStateLoggerPlugin()
+    new WatchStateLoggerPlugin(),
+    /* config.plugin('ReactRefreshWebpackPlugin') */
+    new ReactRefreshWebpackPlugin(
+      {
+        overlay: false,
+        forceEnable: false
+      }
+    )
   ],
   entry: {
     inspector_modules: [

packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap

@@ -25,7 +25,9 @@ exports[`vue configuration for android 1`] = `
     rules: [
       /* config.module.rule('ts') */
       {
-        test: /\\\\.ts$/,
+        test: [
+          /\\\\.ts$/
+        ],
         use: [
           /* config.module.rule('ts').use('ts-loader') */
           {
@@ -99,7 +101,7 @@ exports[`vue configuration for android 1`] = `
     ]
   },
   plugins: [
-    /* config.plugin('clean') */
+    /* config.plugin('CleanWebpackPlugin') */
     new CleanWebpackPlugin(
       {
         cleanOnceBeforeBuildPatterns: [
@@ -108,7 +110,7 @@ exports[`vue configuration for android 1`] = `
         verbose: true
       }
     ),
-    /* config.plugin('define') */
+    /* config.plugin('DefinePlugin') */
     new DefinePlugin(
       {
         'global.NS_WEBPACK': true,
@@ -117,15 +119,15 @@ exports[`vue configuration for android 1`] = `
         process: 'global.process'
       }
     ),
-    /* config.plugin('copy') */
+    /* config.plugin('CopyWebpackPlugin') */
     new CopyPluginTemp(
       {
         patterns: []
       }
     ),
-    /* config.plugin('watch-state-logger') */
+    /* config.plugin('WatchStateLoggerPlugin') */
     new WatchStateLoggerPlugin(),
-    /* config.plugin('vue') */
+    /* config.plugin('VueLoaderPlugin') */
     new VueLoaderPlugin()
   ],
   entry: {
@@ -161,7 +163,9 @@ exports[`vue configuration for ios 1`] = `
     rules: [
       /* config.module.rule('ts') */
       {
-        test: /\\\\.ts$/,
+        test: [
+          /\\\\.ts$/
+        ],
         use: [
           /* config.module.rule('ts').use('ts-loader') */
           {
@@ -235,7 +239,7 @@ exports[`vue configuration for ios 1`] = `
     ]
   },
   plugins: [
-    /* config.plugin('clean') */
+    /* config.plugin('CleanWebpackPlugin') */
     new CleanWebpackPlugin(
       {
         cleanOnceBeforeBuildPatterns: [
@@ -244,7 +248,7 @@ exports[`vue configuration for ios 1`] = `
         verbose: true
       }
     ),
-    /* config.plugin('define') */
+    /* config.plugin('DefinePlugin') */
     new DefinePlugin(
       {
         'global.NS_WEBPACK': true,
@@ -253,15 +257,15 @@ exports[`vue configuration for ios 1`] = `
         process: 'global.process'
       }
     ),
-    /* config.plugin('copy') */
+    /* config.plugin('CopyWebpackPlugin') */
     new CopyPluginTemp(
       {
         patterns: []
       }
     ),
-    /* config.plugin('watch-state-logger') */
+    /* config.plugin('WatchStateLoggerPlugin') */
     new WatchStateLoggerPlugin(),
-    /* config.plugin('vue') */
+    /* config.plugin('VueLoaderPlugin') */
     new VueLoaderPlugin()
   ],
   entry: {

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');