packages/cli: rename bundle loaders to transforms and include plugins

packages/cli/src/lib/bundle/config.ts

@@ -15,11 +15,10 @@
  */
 
 import webpack from 'webpack';
-import HtmlWebpackPlugin from 'html-webpack-plugin';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import ModuleScopePlugin from 'react-dev-utils/ModuleScopePlugin';
 import { BundlingPaths } from './paths';
-import { loaders } from './loaders';
+import { transforms } from './transforms';
 import { optimization } from './optimization';
 import { BundlingOptions } from './types';
 // import checkRequiredFiles from 'react-dev-utils/checkRequiredFiles';
@@ -34,12 +33,7 @@ export function createConfig(
 ): webpack.Configuration {
   const { checksEnabled, isDev } = options;
 
-  const plugins = [
-    new HtmlWebpackPlugin({
-      template: paths.targetHtml,
-    }),
-    new webpack.HotModuleReplacementPlugin(),
-  ];
+  const { plugins, loaders } = transforms(paths, options);
 
   if (checksEnabled) {
     plugins.push(
@@ -78,7 +72,7 @@ export function createConfig(
       },
     },
     module: {
-      rules: loaders(),
+      rules: loaders,
     },
     output: {
       path: paths.targetDist,

packages/cli/src/lib/bundle/transforms.ts

@@ -14,10 +14,23 @@
  * limitations under the License.
  */
 
-import { Module } from 'webpack';
+import webpack, { Module, Plugin } from 'webpack';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import { BundlingOptions } from './types';
+import { BundlingPaths } from './paths';
 
-export const loaders = (): Module['rules'] => {
-  return [
+type Transforms = {
+  loaders: Module['rules'];
+  plugins: Plugin[];
+};
+
+export const transforms = (
+  paths: BundlingPaths,
+  options: BundlingOptions,
+): Transforms => {
+  const { isDev } = options;
+
+  const loaders = [
     {
       test: /\.(tsx?)$/,
       exclude: /node_modules/,
@@ -55,4 +68,18 @@ export const loaders = (): Module['rules'] => {
       use: [require.resolve('style-loader'), require.resolve('css-loader')],
     },
   ];
+
+  const plugins = new Array<Plugin>();
+
+  plugins.push(
+    new HtmlWebpackPlugin({
+      template: paths.targetHtml,
+    }),
+  );
+
+  if (isDev) {
+    plugins.push(new webpack.HotModuleReplacementPlugin());
+  }
+
+  return { loaders, plugins };
 };