test_web_router/webpack.config.js

const path              = require('path');
const webpack           = require('webpack');
const CopyPlugin        = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const packages          = require('./package.json');

module.exports = {
    entry: {
        app: [
            './src/ts/index.tsx'
        ],
        vendor: Object.keys(packages.dependencies)
    },

    output: {
        filename: 'app.js',
        path: path.join(__dirname, 'dist/'),
    },

    devtool: 'cheap-module-eval-source-map',

    devServer: {
        hot: true, // enable HMR on the server
        inline: true,
        historyApiFallback: true,
        contentBase: [__dirname + '/public', __dirname + '/dist', __dirname + '/node_modules'], // match the output path
        publicPath:  '/' ,// match the output `publicPath`
        host: '192.168.1.103',
        port: 9091,
        stats: { 
            colors: true 
        },
        watchOptions: {
          ignored: /node_modules/,
      },
    },

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: ['.ts', '.tsx', '.js', '.json']
    },

    module: {
        rules: [
            {
                enforce: 'pre',
                test: /\.js$/,
                loader: 'source-map-loader'
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'postcss-loader', 'sass-loader']
                })
            },
            {
                test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
                // loader: 'url?limit=10000'
                loaders: [
                    'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
                    'image-webpack-loader?bypassOnDebug&optipng.optimizationLevel=7&gifsicle.interlaced=false'
                ]
            },

            {
                test: /\.tsx?$/,
                loader: 'awesome-typescript-loader'
            }

        ]
    },
    plugins:     [
        new CopyPlugin([
            {
                from: 'public/index.html'
            }
        ]),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: Infinity,
            filename: 'vendor.js'
        }),
        new ExtractTextPlugin({
            filename: __dirname + '/dist/css/[name].bundle.css',
            disable: false,
            allChunks: true
        }),
        new webpack.HotModuleReplacementPlugin(), // enable HMR globally

    ],
    // When importing a module whose path matches one of the following, just
    // assume a corresponding global variable exists and use that instead.
    // This is important because it allows us to avoid bundling all of our
    // dependencies, which allows browsers to cache those libraries between builds.
    // externals: {
    //     'react': 'React',
    //     'react-dom': 'ReactDOM'
    // },
};