ing

config/webpack/webpack.config.base.js

@@ -3,47 +3,59 @@ const TsConfigPathsPlugin = require('awesome-typescript-loader').TsConfigPathsPl
 const packages = require('../../package.json');
  
 module.exports = { 
-    target: 'web',
+  target: 'web',
-    entry: {
+  entry: {
-        webapp: [
+    webapp: [
-            Path.resolve(__dirname, '../../src/ts/@overflow/webapp/index.tsx')
+        Path.resolve(__dirname, '../../src/ts/@overflow/webapp/index.tsx')
-        ],
-        vendor: Object.keys(packages.dependencies)
-    },
- 
-    output: {
-        path: Path.resolve(__dirname, '../../dist'),
-        filename: '[name].js',
-        publicPath: '/'
-    },
- 
-    devtool: '',
- 
-    resolve: {
-        extensions: ['.ts', '.tsx', '.js', '.json'],
-        plugins: [
-            new TsConfigPathsPlugin({
-                tsconfig: "tsconfig.json",
-                compiler: "typescript"
-            })
-        ]
-    },
- 
-    module: {
-        rules: [
-            {
-                test: /\.tsx?$/,
-                enforce: 'pre',
-                exclude: [
-                    Path.resolve(__dirname, '../../node_modules/')
-                ],
-                loader: 'tslint-loader',
-            }
-        ]
-    },
-    plugins: [
     ],
-    node: {
+    vendor: Object.keys(packages.dependencies)
-        fs: 'empty'
+  },
-    }
+
+  output: {
+    path: Path.resolve(__dirname, '../../dist'),
+    filename: '[name].js',
+    publicPath: '/'
+  },
+
+  devtool: '',
+
+  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",
+        compiler: "typescript"
+      })
+    ]
+  },
+
+  module: {
+    loaders: [
+      {
+        enforce: 'pre',
+        test: /\.tsx?$/,
+        exclude: [
+          Path.resolve(__dirname, '../../node_modules/')
+        ],
+        use: [
+          {
+            loader: 'tslint-loader'
+          }
+        ],    
+      }
+    ]
+  },
+
+  plugins: [
+  ],
+
+  node: {
+    // 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,96 +6,104 @@ 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',
+  
+  devServer: {
+    hot: true,
+    inline: true,
+    historyApiFallback: true,
+    publicPath:  '/', // match the output `publicPath`
+    contentBase: [__dirname + '/public', __dirname + '/dist', __dirname + '/node_modules'], // match the output path
+    host: '127.0.0.1',
+    port: 9091,
+    stats: { 
+      colors: true 
+    },
+    watchOptions: {
+      ignored: /node_modules/,
+    },
+  },
+ 
+  module: {
+    loaders: [
+      // source-map
+      {
+        enforce: 'pre',
+        test: /\.js$/,
+        use: [
+          {
+            loader: 'source-map-loader'
+          }
+        ],
+        exclude: [
+          Path.resolve(__dirname, '../../node_modules/')
         ]
-    },
+      },
-
+      {
-    devtool: 'inline-source-map',
+        enforce: 'pre',
-    
+        test: /\.tsx$/,
-    devServer: {
+        use: [
-        hot: true,
+          {
-        inline: true,
+            loader: 'source-map-loader'
-        historyApiFallback: true,
+          }
-        publicPath:  '/', // match the output `publicPath`
+        ],
-        contentBase: [__dirname + '/public', __dirname + '/dist', __dirname + '/node_modules'], // match the output path
+        exclude: [
-        host: '127.0.0.1',
+          Path.resolve(__dirname, '../../node_modules/')
-        port: 9091,
-        stats: { 
-            colors: true 
-        },
-        watchOptions: {
-          ignored: /node_modules/,
-        },
-    },
- 
-    module: {
-        rules: [
-            {
-                enforce: 'pre',
-                test: /\.js$/,
-                loader: 'source-map-loader',
-                exclude: [
-                    Path.resolve(__dirname, '../../node_modules/')
-                ]
-            },
-            {
-                enforce: 'pre',
-                test: /\.tsx?$/,
-                use: "source-map-loader",
-                exclude: [
-                    Path.resolve(__dirname, '../../node_modules/')
-                ]
-            },
-            // {
-            //     test: /\.tsx?$/,
-            //     loaders: [
-            //         'awesome-typescript-loader'
-            //     ],
-            //     exclude: [
-            //         Path.resolve(__dirname, '../../node_modules/')
-            //     ],
-            //     include: [
-            //         Path.resolve(__dirname, '../../src/')
-            //     ]
-            // },
-            {
-                test: /\.tsx?$/,
-                exclude: [
-                    Path.resolve(__dirname, '../../node_modules/')
-                ],
-                include: [
-                    Path.resolve(__dirname, '../../src/')
-                ],
-                use: [
-                    {
-                        loader: 'react-hot-loader/webpack' 
-                    },
-                    {
-                        loader: 'awesome-typescript-loader',
-                        options: {
-                            transpileOnly: true,
-                            useTranspileModule: false,
-                            sourceMap: true,
-                        },
-                    },
-                ],
-            },
         ]
-    },
+      },
-    plugins: [
+      // .ts, .tsx
-        new WebpackDashboardPlugin(),
+      {
-        new Webpack.HotModuleReplacementPlugin(),
+        test: /\.tsx?$/,
-        new Webpack.NamedModulesPlugin(),
+        exclude: [
-        new Webpack.NoEmitOnErrorsPlugin(),
+          Path.resolve(__dirname, '../../node_modules/')
-        new HtmlWebpackPlugin({
+        ],
-            template: Path.resolve(__dirname, '../../public/index.html')
+        include: [
-        }),
+            Path.resolve(__dirname, '../../src/')
-        new Webpack.optimize.CommonsChunkPlugin({
+        ],
-            name: 'vendor',
+        use: [
-            minChunks: Infinity,
+          {
-            filename: 'vendor.js'
+            loader: 'react-hot-loader/webpack' 
-        }),
+          },
-    ]
+          {
+              loader: 'awesome-typescript-loader',
+              options: {
+                  transpileOnly: true,
+                  useTranspileModule: false,
+                  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.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('development')
+    }),
+    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

@@ -5,67 +5,77 @@ const configBase = require('./webpack.config.base.js');
  
  
 module.exports = WebpackMerge(configBase, {
-    devtool: 'source-map',
+  devtool: 'source-map',
 
-    module: {
+  module: {
-        rules: [
+    loaders: [
-            {
+      // .ts, .tsx
-                enforce: 'pre',
+      {
-                test: /\.js$/,
+        test: /\.tsx?$/,
-                loader: 'source-map-loader',
+        exclude: [
-                exclude: [
+          Path.resolve(__dirname, '../../node_modules/')
-                    Path.resolve(__dirname, '../../node_modules/')
+        ],
-                ]
+        include: [
-            },
+          Path.resolve(__dirname, '../../src/')
-            {
+        ],
-                test: /\.tsx?$/,
+        use: [
-                loader: 'awesome-typescript-loader',
+          {
-                exclude: [
+            loader: 'awesome-typescript-loader?module=es6'
-                    Path.resolve(__dirname, '../../node_modules/')
+          },
-                ]
-            },
         ]
-    },
+      },
-    plugins: [
-        new Webpack.DefinePlugin({
-            'process.env': {
-                'NODE_ENV': JSON.stringify('production')
-            },
-            'DEBUG': false,
-            '__DEVTOOLS__': false
-        }),
-        // 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
-        //    Webpack 2. https://github.com/webpack/webpack/tree/master/lib/optimize
-        new Webpack.optimize.UglifyJsPlugin({
-            compress: {
-                warnings: false,
-                screw_ie8: true,
-                conditionals: true,
-                unused: true,
-                comparisons: true,
-                sequences: true,
-                dead_code: true,
-                evaluate: true,
-                if_return: true,
-                join_vars: true,
-                drop_console: true,
-                drop_debugger: true,
-                global_defs: {
-                    __REACT_HOT_LOADER__: undefined // eslint-disable-line no-undefined
-                }
-            },
-            minimize: true,
-            debug: false,
-            sourceMap: true,
-            output: {
-                comments: false
-            },
 
-        }),
+      // static assets
-        // Included by default in webpack 2
+      { test: /\.html$/, use: 'html-loader' },
-        // new webpack.optimize.OccurrenceOrderPlugin(),
+      { test: /\.png$/, use: 'url-loader?limit=10000' },
-        new Webpack.optimize.AggressiveMergingPlugin()
+      { test: /\.jpg$/, use: 'file-loader' },
-    ]
+    ],
+  },
+  plugins: [
+    new Webpack.DefinePlugin({
+      'process.env': {
+          'NODE_ENV': JSON.stringify('production')
+      },
+      '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
+    //    Webpack 2. https://github.com/webpack/webpack/tree/master/lib/optimize
+    new Webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false,
+        screw_ie8: true,
+        conditionals: true,
+        unused: true,
+        comparisons: true,
+        sequences: true,
+        dead_code: true,
+        evaluate: true,
+        if_return: true,
+        join_vars: true,
+        drop_console: true,
+        drop_debugger: true,
+        global_defs: {
+          __REACT_HOT_LOADER__: undefined // eslint-disable-line no-undefined
+        }
+      },
+      minimize: true,
+      debug: false,
+      sourceMap: true,
+      output: {
+        comments: false
+      },
+
+    }),
+    // Included by default in webpack 2
+    // new webpack.optimize.OccurrenceOrderPlugin(),
+    new Webpack.optimize.AggressiveMergingPlugin()
+  ]
 });

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>
     );
   }
 }