Webpack 101

React Time

There comes a point in any developers life where they decide, "Yolo, let's put react in my application". Nowadays, there are a MILLION templates that will allow you to spin up a react project that "just works", but I think most of them are difficult to work with. So let's spin up our own, because it's pretty easy.

Remember, React is just another file type that we will need to transpile. Lucky for us, babel-loader comes with a react preset, so we can just use that.

    const path = require('path');

    module.exports = {
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
    mode: 'production',
    module: {
            rules: [
                {
                    test:/\.(js|jsx)$/,
                    include: path.resolve('./'),
                    loader: 'babel-loader',
                    options: {
                        presets: ['babel-preset-env', '@babel/preset-react']
                    },
                    exclude: /node_modules/
                }
            ]
        }
    }