ing

config/webpack/webpack.config.base.js

@@ -21,6 +21,9 @@ module.exports = {
 
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.json'],
+    // Fix webpack's default behavior to not load packages with jsnext:main module
+    // https://github.com/Microsoft/TypeScript/issues/11677
+    mainFields: ['browser', 'main'],
     plugins: [
       new TsConfigPathsPlugin({
         tsconfig: "tsconfig.json",
@@ -30,20 +33,29 @@ module.exports = {
   },
 
   module: {
-        rules: [
+    loaders: [
       {
-                test: /\.tsx?$/,
         enforce: 'pre',
+        test: /\.tsx?$/,
         exclude: [
           Path.resolve(__dirname, '../../node_modules/')
         ],
-                loader: 'tslint-loader',
+        use: [
+          {
+            loader: 'tslint-loader'
+          }
+        ],    
       }
     ]
   },
+
   plugins: [
   ],
+
   node: {
-        fs: 'empty'
+    // workaround for webpack-dev-server issue
+    // https://github.com/webpack/webpack-dev-server/issues/60#issuecomment-103411179
+    fs: 'empty',
+    net: 'empty'
   }
 };

config/webpack/webpack.config.dev.js

@@ -6,11 +6,11 @@ const WebpackDashboardPlugin = require('webpack-dashboard/plugin');
 const configBase = require('./webpack.config.base.js');
  
 module.exports = WebpackMerge(configBase, {
-    entry: {
+  // entry: {
-        webapp: [
+  //     webapp: [
-            'react-hot-loader/patch'
+  //         'react-hot-loader/patch'
-        ]
+  //     ]
-    },
+  // },
 
   devtool: 'inline-source-map',
   
@@ -31,35 +31,33 @@ module.exports = WebpackMerge(configBase, {
   },
  
   module: {
-        rules: [
+    loaders: [
+      // source-map
       {
         enforce: 'pre',
         test: /\.js$/,
-                loader: 'source-map-loader',
+        use: [
+          {
+            loader: 'source-map-loader'
+          }
+        ],
         exclude: [
           Path.resolve(__dirname, '../../node_modules/')
         ]
       },
       {
         enforce: 'pre',
-                test: /\.tsx?$/,
+        test: /\.tsx$/,
-                use: "source-map-loader",
+        use: [
+          {
+            loader: 'source-map-loader'
+          }
+        ],
         exclude: [
           Path.resolve(__dirname, '../../node_modules/')
         ]
       },
-            // {
+      // .ts, .tsx
-            //     test: /\.tsx?$/,
-            //     loaders: [
-            //         'awesome-typescript-loader'
-            //     ],
-            //     exclude: [
-            //         Path.resolve(__dirname, '../../node_modules/')
-            //     ],
-            //     include: [
-            //         Path.resolve(__dirname, '../../src/')
-            //     ]
-            // },
       {
         test: /\.tsx?$/,
         exclude: [
@@ -80,22 +78,32 @@ module.exports = WebpackMerge(configBase, {
                   sourceMap: true,
               },
           },
-                ],
-            },
         ]
       },
+
+      // static assets
+      { test: /\.html$/, use: 'html-loader' },
+      { test: /\.png$/, use: 'url-loader?limit=10000' },
+      { test: /\.jpg$/, use: 'file-loader' },
+    ],
+  },
+
   plugins: [
     new WebpackDashboardPlugin(),
-        new Webpack.HotModuleReplacementPlugin(),
+    new Webpack.DefinePlugin({
-        new Webpack.NamedModulesPlugin(),
+      'process.env.NODE_ENV': JSON.stringify('development')
-        new Webpack.NoEmitOnErrorsPlugin(),
-        new HtmlWebpackPlugin({
-            template: Path.resolve(__dirname, '../../public/index.html')
     }),
     new Webpack.optimize.CommonsChunkPlugin({
       name: 'vendor',
       minChunks: Infinity,
       filename: 'vendor.js'
     }),
+    new Webpack.optimize.AggressiveMergingPlugin(),
+    new Webpack.HotModuleReplacementPlugin(),
+    new Webpack.NamedModulesPlugin(),
+    new Webpack.NoEmitOnErrorsPlugin(),
+    new HtmlWebpackPlugin({
+        template: Path.resolve(__dirname, '../../public/index.html')
+    }),
   ]
 });

config/webpack/webpack.config.prod.js

@@ -8,24 +8,29 @@ module.exports = WebpackMerge(configBase, {
   devtool: 'source-map',
 
   module: {
-        rules: [
+    loaders: [
-            {
+      // .ts, .tsx
-                enforce: 'pre',
-                test: /\.js$/,
-                loader: 'source-map-loader',
-                exclude: [
-                    Path.resolve(__dirname, '../../node_modules/')
-                ]
-            },
       {
         test: /\.tsx?$/,
-                loader: 'awesome-typescript-loader',
         exclude: [
           Path.resolve(__dirname, '../../node_modules/')
-                ]
+        ],
+        include: [
+          Path.resolve(__dirname, '../../src/')
+        ],
+        use: [
+          {
+            loader: 'awesome-typescript-loader?module=es6'
           },
         ]
       },
+
+      // static assets
+      { test: /\.html$/, use: 'html-loader' },
+      { test: /\.png$/, use: 'url-loader?limit=10000' },
+      { test: /\.jpg$/, use: 'file-loader' },
+    ],
+  },
   plugins: [
     new Webpack.DefinePlugin({
       'process.env': {
@@ -34,6 +39,11 @@ module.exports = WebpackMerge(configBase, {
       'DEBUG': false,
       '__DEVTOOLS__': false
     }),
+    new Webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks: Infinity,
+      filename: 'vendor.js'
+    }),
     // Plugings for optimizing size and performance.
     // Here you have all the available by now:
     //    Webpack 1. https://github.com/webpack/webpack/blob/v1.13.3/lib/optimize

package.json

@@ -45,6 +45,7 @@
     "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^1.1.6",
     "greenkeeper-postpublish": "^1.3.0",
+    "html-loader": "^0.5.1",
     "html-webpack-plugin": "^2.30.1",
     "image-webpack-loader": "^3.4.2",
     "jest": "^21.2.1",

src/ts/@overflow/webapp/index.tsx

@@ -100,6 +100,16 @@ class WebAppApplication {
 
   private renderApp(): void {
     WebAppApplication.isProduction ? this.renderProduction() : this.rederDevelopment();
+    // ReactDOM.render(
+    //   <Provider store={this.store}>
+    //     <ConnectedRouter history={this.history}>
+    //       <WebApp/>
+    //     </ConnectedRouter>
+    //   </Provider>
+    //   ,
+    //   this.container,
+    // );
+
   }
   private renderProduction(): void {
     ReactDOM.render(
@@ -114,8 +124,8 @@ class WebAppApplication {
 
   private rederDevelopment(): void {
     if (module.hot) {
-      module.hot.accept('./pages/webapp', () => {
+      module.hot.accept('./pages/webapp', async () => {
-        const NextApp = require('./pages/webapp').default;
+        const NextApp = (await import('./pages/webapp')).default;
         ReactDOM.render(
           <AppContainer>
             <Provider store={this.store}>

src/ts/@overflow/webapp/pages/webapp.tsx

@@ -14,7 +14,7 @@ class WebApp extends React.Component<Props, State> {
 
   public render(): JSX.Element {
     return (
-      <b>Hello...</b>
+      <b>Hello.</b>
     );
   }
 }