Webpack and Babel setup for Javascript

Thu, 03 Jun 2021 11:33:51 +0000

Setup package.json by running:

npm init -y

Add packages:

npm install --save-dev \
  @babel/core          \
  @babel/preset-env    \
  babel-loader         \
  webpack              \
  webpack-cli

Create webpack.config.js with index.js as your main, and bundle.js as output:

const webpack = require('webpack');
const path = require('path');

const config = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname),
    filename: 'bundle.js',
    library: 'SomeClass',
    libraryTarget: 'var',
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }
};

module.exports = config;

Create .babelrc with:

{
  presets: [
    [
      '@babel/preset-env',
      {
        modules: false
      }
    ]
  ]
}

Write your index.js file:

Babel on Codrut Constantin Gusoi

Webpack and Babel setup for Javascript