Skip to content

Instantly share code, notes, and snippets.

Last active July 28, 2023 19:15
Show Gist options
  • Star 18 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save nicolasdao/2e6cdb8a92b5584d90019a0224b1fddc to your computer and use it in GitHub Desktop.
Save nicolasdao/2e6cdb8a92b5584d90019a0224b1fddc to your computer and use it in GitHub Desktop.
Basic damn Webpack config for simple transpilation ES6 to ES5


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.


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


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


// Some code here...

module.exports = {


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

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 { 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 = {
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
Copy link

lol at your description but extremely helpful to start!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment