Added tree shaking using ts-import-plugin.

Author: Dennis Miasoutov

app/entry/index.dev.ts

@@ -1,9 +1,5 @@
 // @ts-ignore
 import * as AppModule from "injected-app-module";
 import { hot } from "react-hot-loader/root";
-import { logger } from "redux-logger";
 
-const App = hot(AppModule.App);
-const devMiddlewares = [logger];
-
-export { App, devMiddlewares };
+export default hot(AppModule.App);

app/entry/index.prod.ts

@@ -1,7 +1,4 @@
 // @ts-nocheck
 import * as AppModule from "injected-app-module";
 
-const App = AppModule.App;
-const devMiddlewares = [];
-
-export { App, devMiddlewares };
+export default AppModule.App;

app/flavors/basic/app.tsx

@@ -3,13 +3,13 @@ import { AppProps } from "../../common";
 import { HelmetWrapper } from "../../components";
 
 // @ts-ignore
-import * as InjectedAppModule from "injected-app-entry";
+import InjectedAppModule from "injected-app-entry";
 
 export class App extends React.Component<AppProps> {
   public render(): React.ReactNode {
     return (
       <HelmetWrapper helmetContext={this.props.context.helmetContext}>
-        <InjectedAppModule.App />
+        <InjectedAppModule />
       </HelmetWrapper>
     );
   }

app/flavors/router-redux/app.tsx

@@ -5,15 +5,15 @@ import { AppProps } from "../../common";
 import { HelmetWrapper } from "../../components";
 
 // @ts-ignore
-import * as InjectedAppModule from "injected-app-entry";
+import InjectedAppModule from "injected-app-entry";
 
 export class App extends React.Component<AppProps> {
   public render(): React.ReactNode {
     return (
       <HelmetWrapper helmetContext={this.props.context.helmetContext}>
         <Provider store={this.props.context.store}>
           <ConnectedRouter history={this.props.context.history}>
-            <InjectedAppModule.App />
+            <InjectedAppModule />
           </ConnectedRouter>
         </Provider>
       </HelmetWrapper>

app/flavors/router-redux/createContext.ts

@@ -7,7 +7,7 @@ import * as Redux from "redux";
 import { Context } from "../../common";
 
 // @ts-ignore
-import { devMiddlewares } from "injected-app-entry";
+import devMiddlewares from "injected-default-middlewares";
 import { middlewares, reducers } from "injected-app-module/store";
 
 export function createContext(abstractHistory?: History): Context {

app/flavors/router-redux/middlewares/dev.ts

@@ -0,0 +1,3 @@
+import { logger } from "redux-logger";
+
+export default [logger];

app/flavors/router-redux/middlewares/prod.ts

@@ -0,0 +1 @@
+export default [];

package.json

@@ -81,6 +81,7 @@
     "react-hot-loader": "^4.12.18",
     "style-loader": "^1.0.1",
     "terser-webpack-plugin": "^2.3.1",
+    "ts-import-plugin": "^1.6.2",
     "ts-loader": "6.2.1",
     "ts-node": "^8.5.4",
     "tsconfig-paths-webpack-plugin": "^3.2.0",

src/cli/commands/config.ts

@@ -150,6 +150,12 @@ export function createConfigs(dir: string): webpack.Configuration[] {
   inject(configs, "injected-app-module", appRoot);
   inject(configs, "injected-flavor-module", flavorModule);
   inject(configs, "injected-ssr-module", ssrEntryPoint);
+  // inject default middlewares
+  inject(
+    configs,
+    "injected-default-middlewares",
+    program.production ? "./middlewares/prod" : "./middlewares/dev",
+  );
 
   return configs;
 }

src/config-builder/rules/javascript.ts

@@ -0,0 +1,13 @@
+import * as webpack from "webpack";
+
+export const javascript: webpack.Rule = {
+  test: /\.m?js$/,
+  use: [
+    {
+      loader: "babel-loader",
+      options: {
+        presets: ["@babel/preset-env"],
+      },
+    },
+  ],
+};