diff --git a/src/compiler/config/test/validate-config.spec.ts b/src/compiler/config/test/validate-config.spec.ts
index cfe58ed3f33..4791b42cb73 100644
--- a/src/compiler/config/test/validate-config.spec.ts
+++ b/src/compiler/config/test/validate-config.spec.ts
@@ -86,6 +86,13 @@ describe('validation', () => {
       expect(config.buildEs5).toBe(true);
     });
 
+    it('set buildEs5 true, dev mode', () => {
+      userConfig.devMode = true;
+      userConfig.buildEs5 = true;
+      const { config } = validateConfig(userConfig);
+      expect(config.buildEs5).toBe(true);
+    });
+
     it('prod mode, set modern and es5', () => {
       userConfig.devMode = false;
       userConfig.buildEs5 = true;
@@ -93,6 +100,20 @@ describe('validation', () => {
       expect(config.buildEs5).toBe(true);
     });
 
+    it('build es5 when set to "prod" and in prod', () => {
+      userConfig.devMode = false;
+      userConfig.buildEs5 = 'prod';
+      const { config } = validateConfig(userConfig);
+      expect(config.buildEs5).toBe(true);
+    });
+
+    it('do not build es5 when set to "prod" and in dev', () => {
+      userConfig.devMode = true;
+      userConfig.buildEs5 = 'prod';
+      const { config } = validateConfig(userConfig);
+      expect(config.buildEs5).toBe(false);
+    });
+
     it('prod mode default to only modern and not es5', () => {
       userConfig.devMode = false;
       const { config } = validateConfig(userConfig);
diff --git a/src/compiler/config/validate-config.ts b/src/compiler/config/validate-config.ts
index c245ca0bde7..46532faf256 100644
--- a/src/compiler/config/validate-config.ts
+++ b/src/compiler/config/validate-config.ts
@@ -41,7 +41,7 @@ export const validateConfig = (userConfig?: Config) => {
   config.extras.initializeNextTick = !!config.extras.initializeNextTick;
   config.extras.tagNameTransform = !!config.extras.tagNameTransform;
 
-  config.buildEs5 = !!config.buildEs5;
+  config.buildEs5 = config.buildEs5 === true || (!config.devMode && config.buildEs5 === 'prod');
 
   setBooleanConfig(config, 'minifyCss', null, !config.devMode);
   setBooleanConfig(config, 'minifyJs', null, !config.devMode);
diff --git a/src/declarations/stencil-public-compiler.ts b/src/declarations/stencil-public-compiler.ts
index 950540ac483..e509f1550a1 100644
--- a/src/declarations/stencil-public-compiler.ts
+++ b/src/declarations/stencil-public-compiler.ts
@@ -115,16 +115,13 @@ export interface StencilConfig {
   rollupConfig?: RollupConfig;
 
   /**
-   * Sets if the ES5 build should be generated or not. It defaults to `false` in dev mode, and `true` in
-   * production mode. Notice that Stencil always generates a modern build too, whereas this setting
-   * will either disable es5 builds entirely with `false`, or always create es5 builds (even in dev mode)
-   * when set to `true`. Basically if the app does not need to run on legacy browsers
-   * (IE11 and Edge 18 and below), it's safe to set `buildEs5` to `false`, which will also speed up
-   * production build times. In addition to not creating es5 builds, apps may also be interested in
-   * disabling any unnecessary runtime when support legacy browsers. See
-   * [https://stenciljs.com/docs/config-extras](/docs/config-extras) for more information.
-   */
-  buildEs5?: boolean;
+   * Sets if the ES5 build should be generated or not. Stencil generates a modern build without ES5,
+   * whereas this setting to `true` will also create es5 builds for both dev and prod modes. Setting
+   * `buildEs5` to `prod` will only build ES5 in prod mode. Basically if the app does not need to run
+   * on legacy browsers (IE11 and Edge 18 and below), it's safe to not build ES5, which will also speed
+   * up build times. Defaults to `false`.
+   */
+  buildEs5?: boolean | 'prod';
 
   /**
    * Sets if the JS browser files are minified or not. Stencil uses `terser` under the hood.