packages/cli: separate dev and prod config

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

@@ -36,7 +36,11 @@ export async function buildBundle(options: BuildOptions) {
   const { statsJsonEnabled } = options;
 
   const paths = resolveBundlingPaths(options);
-  const config = createConfig(paths, { ...options, checksEnabled: false });
+  const config = createConfig(paths, {
+    ...options,
+    checksEnabled: false,
+    isDev: false,
+  });
   const compiler = webpack(config);
 
   const isCi = yn(process.env.CI, { default: false });

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

@@ -32,7 +32,7 @@ export function createConfig(
   paths: BundlingPaths,
   options: BundlingOptions,
 ): webpack.Configuration {
-  const { checksEnabled } = options;
+  const { checksEnabled, isDev } = options;
 
   const plugins = [
     new HtmlWebpackPlugin({
@@ -58,10 +58,10 @@ export function createConfig(
   }
 
   return {
-    mode: 'development',
+    mode: isDev ? 'development' : 'production',
     profile: false,
     bail: false,
-    devtool: 'cheap-module-eval-source-map',
+    devtool: isDev ? 'cheap-module-eval-source-map' : 'source-map',
     context: paths.targetPath,
     entry: [require.resolve('react-hot-loader/patch'), paths.targetEntry],
     resolve: {
@@ -84,7 +84,7 @@ export function createConfig(
       publicPath: '/',
       filename: 'bundle.js',
     },
-    optimization: optimization(),
+    optimization: optimization(options),
     plugins,
     node: {
       module: 'empty',

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

@@ -15,9 +15,15 @@
  */
 
 import { Options } from 'webpack';
+import { BundlingOptions } from './types';
+
+export const optimization = (
+  options: BundlingOptions,
+): Options.Optimization => {
+  const { isDev } = options;
 
-export const optimization = (): Options.Optimization => {
   return {
+    minimize: !isDev,
     runtimeChunk: 'single',
     splitChunks: {
       automaticNameDelimiter: '-',
@@ -38,7 +44,9 @@ export const optimization = (): Options.Optimization => {
             // npm package names are URL-safe, but some servers don't like @ symbols
             return packageName.replace('@', '');
           },
-          filename: 'module-[name].[chunkhash:8].js',
+          filename: isDev
+            ? 'module-[name].js'
+            : 'module-[name].[chunkhash:8].js',
           priority: 10,
           minSize: 100000,
           minChunks: 1,

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

@@ -36,7 +36,7 @@ export async function startDevServer(options: ServeOptions) {
   const urls = prepareUrls(protocol, host, port);
 
   const paths = resolveBundlingPaths(options);
-  const config = createConfig(paths, options);
+  const config = createConfig(paths, { ...options, isDev: true });
   const compiler = webpack(config);
 
   const server = new WebpackDevServer(compiler, {

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

@@ -18,6 +18,7 @@ import { BundlingPathsOptions } from './paths';
 
 export type BundlingOptions = {
   checksEnabled: boolean;
+  isDev: boolean;
 };
 
 export type ServeOptions = BundlingPathsOptions & {