const path = require('path');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
    entry: './client/index.jsx',
    output: {
        path: path.join(__dirname, 'build'),
        filename: 'bundle.js',
        // It's very important
        // All the chunk generated by webpack then will be loaded such as
        // <script charset="utf-8" src="/[chunk-name].bundle.js"></script>
        // The script is accessible from any page that exported by a 3rd party such as react-snap
        publicPath: '/',
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
    resolve: {
        extensions: ['.js', '.jsx'],
    },
    devtool: 'cheap-module-eavl-source-map',
    devServer: {
        contentBase: path.join(__dirname, 'build'),
        historyApiFallback: true,
    },
    plugins: [
        new BundleAnalyzerPlugin(),
    ],
};