Basic webpack react babeljs setup

In this post I will take care of basic setup of reactjs project using webpack. To do this as a base I will use code from my previous post about how to theme material ui. For package manager I use yarn. There is great writeup about why yarn was created by facebook.

My basic dependencies are 1. webpack, webpack-cli - to build frontend application 2. copy-webpack-plugin - to copy static assets 3. @babel-core, @babel/preset-react and babel-loader - to transpile code

{
  "name": "basic-webpack-react-babeljs-es6-setup",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "postinstall": "webpack"
  },
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "copy-webpack-plugin": "^5.0.3",
    "webpack": "^4.35.0",
    "webpack-cli": "^3.3.4"
  }
}

I can get rid of react, react-dom, @babel/preset-react dependencies if I want to use other frontend framework or just use es6.
Some of the options of the package.json script is postinstall script that will launch everytime I add some package. Also it gives me ability to build project using one word.

yarn

Next configuration option is .babelrc file where I can specify plugins for babeljs compiler. Babel is also great cause it gives developers ability to use features from future javascript versions, proposals and experiments like async generator functions, decorators, class properties or private methods to name a few.

So in this example my .babelrc file is simple

{
  "presets": ["@babel/preset-react"]
}

And finally there is webpack that allows to configure build with some build steps but now it's simple.

const webpack = require('webpack');
const Copy = require('copy-webpack-plugin');

module.exports = {
  mode: 'none',
  entry: './src/index.js',
  output: {
    path: __dirname + '/build',
    filename: 'index.js',
    library: 'Demo',
    libraryTarget: 'umd',
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
        },
      }
    ],
  },
  plugins: [
    new Copy([
      {from: 'html'},
    ]),
  ]
}

To use babel with webpack I use babel-loader and it's specified in module -> rules -> use -> loader.
The main file is entry output is in output -> path. __dirname is node global variable pointing to current directory.
To copy data from html directory to build directory I use copy-webpack-plugin that is defined in plugins section.
Finally you can define your export as a library which means it will be available as global variable.

library: 'Demo',
libraryTarget: 'umd',

If your file exports any variable or method. For example :

import ReactDOM from 'react-dom';
import React from 'react';

export const Test = () => {
  return (<h1>Hello World !</h1>)
}

ReactDOM.render(<Test />, document.getElementById('app'));

You can access each exported method or variable by typing Demo.methodName to the console.

Finally there is mode.

mode: 'none',

That can also be 'production' to create size optimized build or 'development'

You can test this sample entering here also code is on my github repository.