Basic damn Webpack config for simple transpilation ES6 to ES5

webpack.md

Install

npm install -D acorn babel-loader @babel/core @babel/preset-env babel-polyfill webpack webpack-cli uglifyjs-webpack-plugin --save-dev

webpack-cli and acorn are dependencies that you, unfortunately, have to install if you want to run this god damn thing without any obscure warnings or errors.

Build

Configure Webpack

That's where things become annoying and why I've written this document. Simply paste the next file called webpack.config.js into a new file with the same name which should be place under your project's root folder.

NPM Scripts

Add the following scripts in your package.json:

{
  "scripts": {
    "build": "WEBPACK_ENV=build webpack",
    "dev": "WEBPACK_ENV=dev webpack"
  }
}

The difference between dev and build is that build adds JS uglification to make the production code smaller.

Run The Code

To build your production code, run:

npm run build

To build your dev code, run:

npm run dev

DOs and DO NOTs

DOs

Make sure there is a main file (e.g., index.js) that will export all your APIs. Example:

index.js

// Some code here...

module.exports = {
  yourAPIfn_01,
  yourAPIfn_02
}

DO NOTs

Use NodeJs specific libraries like fs. Those libs are designed to run in Node only. They cannot be transpiled.

weppack.config.js

const path = require('path')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const webpack = require('webpack')
const env = process.env.WEBPACK_ENV

// Simply configure those 4 variables:
const JS_SOURCE_FILES = ['babel-polyfill', './index.js']
const OUTPUT_FILENAME = 'index'
const DEST_FOLDER = 'dist'
const COPYRIGHT = `Add your copyright here. It is included at the beginning of your bundle.`

const OUTPUT_FILE = `${OUTPUT_FILENAME}.js`
const OUTPUT_FILE_MIN = `${OUTPUT_FILENAME}.min.js`

const { plugins, outputfile, mode } = env == 'build' 
	? { 
		plugins: [
			new UglifyJSPlugin(), 
			new webpack.BannerPlugin(COPYRIGHT)
		], 
		outputfile: OUTPUT_FILE_MIN,
		mode: 'production'
	} 
	: { 
		plugins: [
			new webpack.BannerPlugin(COPYRIGHT)
		], 
		outputfile: OUTPUT_FILE,
		mode: 'development'
	} 

module.exports = {
	mode,
	entry: JS_SOURCE_FILES,
	output: {
		path: path.join(__dirname, DEST_FOLDER),
		filename: outputfile,
		libraryTarget: 'umd',
		umdNamedDefine: true
	},
	module: {
		rules: [{
			// Only run `.js` files through Babel
			test: /\.m?js$/,
			exclude: /(node_modules)/,
			use: {
				loader: 'babel-loader',
				options: {
					presets: ['@babel/preset-env']
				}
			}
		}]
	},
	devtool: 'source-map',
	plugins: plugins
}

lol at your description but extremely helpful to start!