webpack - dev & prod

const path = require('path');
const paths = {
    SRC: path.resolve(__dirname, 'src'),     // Source folder path
    DIST: path.resolve(__dirname, 'dist'),   // Webpack bundling destination folder
};

const HtmlWebPackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require('extract-text-webpack-plugin');


// Webpack Configuration
module.exports = {
    entry: path.join(paths.SRC, 'index.js'),
    output: {
        path: paths.DIST,
        filename: 'app.bundle.js'
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: path.join(paths.SRC, 'index.html'),
            filename: "./index.html"
        }),
        new ExtractTextPlugin('style.bundle.css')
    ],
    // Loaders configuration
    // We are telling webpack to use "babel-loader" for .js and .jsx files
    module: {
        rules: [
            {
                test: /.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /.js$/,
                exclude: /node_modules/,
                use: ['babel-loader', 'eslint-loader']
            },
            // CSS loader to CSS files
            // Files will get handled by css loader and then passed to the extract text plugin
            // which will write it to the file we defined above
            {
                test: /.css$/,
                loader: ExtractTextPlugin.extract({
                    use: 'css-loader',
                })
            },
            // File loader for image assets
            // We'll add only image extensions, but things like svgs, fonts and videos will also work
            {
                test: /.(png|jpg|gif)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[path][name].[ext]'
                    }
                }]
            }
        ]
    },
    stats: {
        colors: true
    },
    // Enable importing JS files without specifying extenstion
    // So we can write:
    // import MyComponent from './my-component';
    // Instead of:
    // import MyComponent from './my-component.';
    resolve: {
        extensions: ['.js', '.jsx', '.css']
    },
    devServer: {
        port: 8081
    }
};