Skip to content

Instantly share code, notes, and snippets.

@nicolasdao
Last active June 22, 2024 02:56
Show Gist options
  • 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

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.

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
}
@petrosmm
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