Repository: blacksonic/babel-webpack-tree-shaking
Branch: master
Commit: dcbbc1a1b336
Files: 15
Total size: 16.2 KB
Directory structure:
gitextract_1cto7w5u/
├── .babelrc
├── .gitignore
├── app/
│ ├── car.js
│ └── engine.js
├── dist/
│ ├── car.bundle.js
│ ├── car.es2015.bundle.js
│ ├── car.es2015.prod.bundle.js
│ └── car.prod.bundle.js
├── index.html
├── package.json
├── readme.md
├── webpack.config.js
├── webpack.es2015.config.js
├── webpack.es2015.prod.config.js
└── webpack.prod.config.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .babelrc
================================================
{
"presets": [
["env", {
"loose": true,
"modules": false
}]
],
"plugins": ["transform-runtime"]
}
================================================
FILE: .gitignore
================================================
node_modules
.idea
================================================
FILE: app/car.js
================================================
import { V8Engine } from './engine';
class SportsCar {
constructor(engine) {
this.engine = engine;
}
toString() {
return this.engine.toString() + ' Sports Car';
}
}
console.log(new SportsCar(new V8Engine()).toString());
================================================
FILE: app/engine.js
================================================
export class V6Engine {
toString() {
return 'V6';
}
}
export class V8Engine {
toString() {
return 'V8';
}
}
export function getVersion() {
return '1.0';
}
================================================
FILE: dist/car.bundle.js
================================================
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // identity function for calling harmony imports with the correct context
/******/ __webpack_require__.i = function(value) { return value; };
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 2);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
exports.default = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
};
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* unused harmony export V6Engine */
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return V8Engine; });
/* unused harmony export getVersion */
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_classCallCheck__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_classCallCheck___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_classCallCheck__);
var V6Engine = function () {
function V6Engine() {
__WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_classCallCheck___default()(this, V6Engine);
}
V6Engine.prototype.toString = function toString() {
return 'V6';
};
return V6Engine;
}();
var V8Engine = function () {
function V8Engine() {
__WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_classCallCheck___default()(this, V8Engine);
}
V8Engine.prototype.toString = function toString() {
return 'V8';
};
return V8Engine;
}();
function getVersion() {
return '1.0';
}
/***/ }),
/* 2 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_classCallCheck__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_classCallCheck___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_classCallCheck__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__engine__ = __webpack_require__(1);
var SportsCar = function () {
function SportsCar(engine) {
__WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_classCallCheck___default()(this, SportsCar);
this.engine = engine;
}
SportsCar.prototype.toString = function toString() {
return this.engine.toString() + ' Sports Car';
};
return SportsCar;
}();
console.log(new SportsCar(new __WEBPACK_IMPORTED_MODULE_1__engine__["a" /* V8Engine */]()).toString());
/***/ })
/******/ ]);
================================================
FILE: dist/car.es2015.bundle.js
================================================
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // identity function for calling harmony imports with the correct context
/******/ __webpack_require__.i = function(value) { return value; };
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 1);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* unused harmony export getVersion */
class V6Engine {
toString() {
return 'V6';
}
}
/* unused harmony export V6Engine */
class V8Engine {
toString() {
return 'V8';
}
}
/* harmony export (immutable) */ __webpack_exports__["a"] = V8Engine;
function getVersion() {
return '1.0';
}
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__engine__ = __webpack_require__(0);
class SportsCar {
constructor(engine) {
this.engine = engine;
}
toString() {
return this.engine.toString() + ' Sports Car';
}
}
console.log(new SportsCar(new __WEBPACK_IMPORTED_MODULE_0__engine__["a" /* V8Engine */]()).toString());
/***/ })
/******/ ]);
================================================
FILE: dist/car.es2015.prod.bundle.js
================================================
(function(a){function b(d){if(c[d])return c[d].exports;var e=c[d]={i:d,l:!1,exports:{}};return a[d].call(e.exports,e,e.exports,b),e.l=!0,e.exports}var c={};return b.m=a,b.c=c,b.i=function(a){return a},b.d=function(a,c,d){b.o(a,c)||Object.defineProperty(a,c,{configurable:!1,enumerable:!0,get:d})},b.n=function(a){var c=a&&a.__esModule?function(){return a['default']}:function(){return a};return b.d(c,'a',c),c},b.o=function(a,b){return Object.prototype.hasOwnProperty.call(a,b)},b.p='',b(b.s=1)})([function(a,b){'use strict';b.a=class{toString(){return'V8'}}},function(a,b,c){'use strict';Object.defineProperty(b,'__esModule',{value:!0});var d=c(0);console.log(new class{constructor(a){this.engine=a}toString(){return this.engine.toString()+' Sports Car'}}(new d.a()).toString())}]);
================================================
FILE: dist/car.prod.bundle.js
================================================
!function(n){function t(e){if(r[e])return r[e].exports;var o=r[e]={i:e,l:!1,exports:{}};return n[e].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var r={};t.m=n,t.c=r,t.i=function(n){return n},t.d=function(n,r,e){t.o(n,r)||Object.defineProperty(n,r,{configurable:!1,enumerable:!0,get:e})},t.n=function(n){var r=n&&n.__esModule?function(){return n.default}:function(){return n};return t.d(r,"a",r),r},t.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},t.p="",t(t.s=2)}([function(n,t,r){"use strict";t.__esModule=!0,t.default=function(n,t){if(!(n instanceof t))throw new TypeError("Cannot call a class as a function")}},function(n,t,r){"use strict";r.d(t,"a",function(){return u});var e=r(0),o=r.n(e),u=(function(){function n(){o()(this,n)}n.prototype.toString=function(){return"V6"}}(),function(){function n(){o()(this,n)}return n.prototype.toString=function(){return"V8"},n}())},function(n,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var e=r(0),o=r.n(e),u=r(1),i=function(){function n(t){o()(this,n),this.engine=t}return n.prototype.toString=function(){return this.engine.toString()+" Sports Car"},n}();console.log(new i(new u.a).toString())}]);
================================================
FILE: index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tree-shaking example with Babel and Webpack</title>
<link rel="icon" type="image/x-icon" href="favicon.ico"/>
</head>
<body>
<script src="./dist/car.bundle.js"></script>
<!--<script src="./dist/car.prod.bundle.js"></script>-->
<!--<script src="./dist/car.es2015.bundle.js"></script>-->
<!--<script src="./dist/car.es2015.prod.bundle.js"></script>-->
</body>
</html>
================================================
FILE: package.json
================================================
{
"name": "babel-webpack-tree-shaking",
"version": "1.0.0",
"description": "Tree-shaking example with Babel and Webpack",
"main": "dist/car.es2015.prod.bundle.js",
"scripts": {
"webpack": "webpack --config webpack.config.js",
"webpack-prod": "webpack --config webpack.prod.config.js",
"webpack-es2015": "webpack --config webpack.es2015.config.js",
"webpack-es2015-prod": "webpack --config webpack.es2015.prod.config.js",
"serve": "http-server -a 0.0.0.0 -p 9000"
},
"repository": {
"type": "git",
"url": "git+https://github.com/blacksonic/babel-webpack-tree-shaking.git"
},
"keywords": [
"tree-shaking",
"babel",
"webpack"
],
"author": {
"name": "blacksonic",
"email": "soos.gabor86@gmail.com"
},
"license": "ISC",
"dependencies": {},
"devDependencies": {
"babel-core": "~6.25.0",
"babel-loader": "~7.0.0",
"babel-plugin-transform-runtime": "~6.23.0",
"babel-preset-env": "~1.5.2",
"babili": "~0.1.3",
"babili-webpack-plugin": "~0.1.1",
"http-server": "~0.10.0",
"webpack": "~2.6.1"
}
}
================================================
FILE: readme.md
================================================
# Tree-shaking example with Babel and Webpack
[](https://david-dm.org/blacksonic/babel-webpack-tree-shaking?type=dev)
This repository shows how to configure Babel and Webpack to enable tree-shaking.
It will eliminate dead code if they have ES2015 module format.
The source code can be found in the ```app/``` folder,
where the main file ```car.js``` doesn't use all the dependencies from ```engine.js```.
The built and transpiled files can be found in the ```/dist``` folder.
Webpack only marks unused code at bundling and leaves the removing part to minifiers.
This is why all the code is included in development builds in contrary to Rollup.
If you want a more detailed explanation,
[read this article](https://blog.craftlab.hu/how-to-do-proper-tree-shaking-in-webpack-2-e27852af8b21).
### Webpack + Babel + UglifyJS
Can only remove unused functions and variables.
For development build run ```npm run webpack``` (ES2015 -> ES5 bundle).
For production build run ```npm run webpack-prod``` (ES2015 -> ES5 bundle -> UglifyJS).
When transpiling classes with Babel, it generates an IIFE with an assignment to the prototype.
It is considered as a side effect by UglifyJS and it skips removing of it.
See the issues below:
- [Webpack issue](https://github.com/webpack/webpack/issues/2899) and a [more detailed one](https://github.com/webpack/webpack/issues/2867)
- [UglifyJS issue](https://github.com/mishoo/UglifyJS2/issues/1261)
### Webpack + Babili
Can remove unused classes, functions and variables.
For development build run ```npm run webpack-es2015``` (ES2015 -> ES2015 bundle).
For production build run ```npm run webpack-es2015-prod``` (ES2015 -> ES2015 bundle -> Babili).
It uses the [Babili](https://github.com/babel/babili) ES6+ aware minifier and solves the issues what UglifyJS has.
================================================
FILE: webpack.config.js
================================================
'use strict';
let path = require('path');
module.exports = {
entry: {
'car': './app/car.js'
},
output: {
path: path.resolve(process.cwd(), 'dist'),
filename: '[name].bundle.js'
},
module: {
rules: [
{ test: /\.js$/, loader: 'babel-loader' }
]
},
resolve: {
modules: [
path.join(process.cwd(), 'app'),
'node_modules'
],
extensions: ['.js', '.json']
},
devtool: false
};
================================================
FILE: webpack.es2015.config.js
================================================
'use strict';
let path = require('path');
module.exports = {
entry: {
'car.es2015': './app/car.js'
},
output: {
path: path.resolve(process.cwd(), 'dist'),
filename: '[name].bundle.js'
},
module: {
rules: []
},
plugins: [],
resolve: {
modules: [
path.join(process.cwd(), 'app'),
'node_modules'
],
extensions: ['.js', '.json']
},
devtool: false
};
================================================
FILE: webpack.es2015.prod.config.js
================================================
'use strict';
let BabiliPlugin = require("babili-webpack-plugin");
let path = require('path');
module.exports = {
entry: {
'car.es2015.prod': './app/car.js'
},
output: {
path: path.resolve(process.cwd(), 'dist'),
filename: '[name].bundle.js'
},
module: {
rules: []
},
plugins: [
new BabiliPlugin()
],
resolve: {
modules: [
path.join(process.cwd(), 'app'),
'node_modules'
],
extensions: ['.js', '.json']
},
devtool: false
};
================================================
FILE: webpack.prod.config.js
================================================
'use strict';
let webpack = require('webpack');
let path = require('path');
module.exports = {
entry: {
'car.prod': './app/car.js'
},
output: {
path: path.resolve(process.cwd(), 'dist'),
filename: '[name].bundle.js'
},
module: {
rules: [
{ test: /\.js$/, loader: 'babel-loader' }
]
},
plugins: [
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: true
},
output: {
comments: false
},
sourceMap: false
})
],
resolve: {
modules: [
path.join(process.cwd(), 'app'),
'node_modules'
],
extensions: ['.js', '.json']
},
devtool: false
};
gitextract_1cto7w5u/ ├── .babelrc ├── .gitignore ├── app/ │ ├── car.js │ └── engine.js ├── dist/ │ ├── car.bundle.js │ ├── car.es2015.bundle.js │ ├── car.es2015.prod.bundle.js │ └── car.prod.bundle.js ├── index.html ├── package.json ├── readme.md ├── webpack.config.js ├── webpack.es2015.config.js ├── webpack.es2015.prod.config.js └── webpack.prod.config.js
SYMBOL INDEX (30 symbols across 6 files)
FILE: app/car.js
class SportsCar (line 3) | class SportsCar {
method constructor (line 4) | constructor(engine) {
method toString (line 8) | toString() {
FILE: app/engine.js
class V6Engine (line 1) | class V6Engine {
method toString (line 2) | toString() {
class V8Engine (line 7) | class V8Engine {
method toString (line 8) | toString() {
function getVersion (line 13) | function getVersion() {
FILE: dist/car.bundle.js
function __webpack_require__ (line 6) | function __webpack_require__(moduleId) {
function V6Engine (line 96) | function V6Engine() {
function V8Engine (line 108) | function V8Engine() {
function getVersion (line 119) | function getVersion() {
function SportsCar (line 136) | function SportsCar(engine) {
FILE: dist/car.es2015.bundle.js
function __webpack_require__ (line 6) | function __webpack_require__(moduleId) {
class V6Engine (line 75) | class V6Engine {
method toString (line 76) | toString() {
class V8Engine (line 83) | class V8Engine {
method toString (line 84) | toString() {
function getVersion (line 91) | function getVersion() {
class SportsCar (line 105) | class SportsCar {
method constructor (line 106) | constructor(engine) {
method toString (line 110) | toString() {
FILE: dist/car.es2015.prod.bundle.js
function b (line 1) | function b(d){if(c[d])return c[d].exports;var e=c[d]={i:d,l:!1,exports:{...
method toString (line 1) | toString(){return'V8'}
method constructor (line 1) | constructor(a){this.engine=a}
method toString (line 1) | toString(){return this.engine.toString()+' Sports Car'}
FILE: dist/car.prod.bundle.js
function t (line 1) | function t(e){if(r[e])return r[e].exports;var o=r[e]={i:e,l:!1,exports:{...
function n (line 1) | function n(){o()(this,n)}
function n (line 1) | function n(){o()(this,n)}
function n (line 1) | function n(t){o()(this,n),this.engine=t}
Condensed preview — 15 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (18K chars).
[
{
"path": ".babelrc",
"chars": 124,
"preview": "{\n \"presets\": [\n [\"env\", {\n \"loose\": true,\n \"modules\": false\n }]\n ],\n \"plugins\": [\"transform-runtime\""
},
{
"path": ".gitignore",
"chars": 19,
"preview": "node_modules\n.idea\n"
},
{
"path": "app/car.js",
"chars": 239,
"preview": "import { V8Engine } from './engine';\n\nclass SportsCar {\n constructor(engine) {\n this.engine = engine;\n }\n\n toStrin"
},
{
"path": "app/engine.js",
"chars": 175,
"preview": "export class V6Engine {\n toString() {\n return 'V6';\n }\n}\n\nexport class V8Engine {\n toString() {\n return 'V8';\n "
},
{
"path": "dist/car.bundle.js",
"chars": 5040,
"preview": "/******/ (function(modules) { // webpackBootstrap\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n/**"
},
{
"path": "dist/car.es2015.bundle.js",
"chars": 3503,
"preview": "/******/ (function(modules) { // webpackBootstrap\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n/**"
},
{
"path": "dist/car.es2015.prod.bundle.js",
"chars": 783,
"preview": "(function(a){function b(d){if(c[d])return c[d].exports;var e=c[d]={i:d,l:!1,exports:{}};return a[d].call(e.exports,e,e.e"
},
{
"path": "dist/car.prod.bundle.js",
"chars": 1186,
"preview": "!function(n){function t(e){if(r[e])return r[e].exports;var o=r[e]={i:e,l:!1,exports:{}};return n[e].call(o.exports,o,o.e"
},
{
"path": "index.html",
"chars": 449,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Tree-shaking example with Babel and Webpac"
},
{
"path": "package.json",
"chars": 1099,
"preview": "{\n \"name\": \"babel-webpack-tree-shaking\",\n \"version\": \"1.0.0\",\n \"description\": \"Tree-shaking example with Babel and We"
},
{
"path": "readme.md",
"chars": 1907,
"preview": "# Tree-shaking example with Babel and Webpack\n[![devDependency Status](https://david-dm.org/blacksonic/babel-webpack-tre"
},
{
"path": "webpack.config.js",
"chars": 443,
"preview": "'use strict';\n\nlet path = require('path');\n\nmodule.exports = {\n entry: {\n 'car': './app/car.js'\n },\n\n output: {\n "
},
{
"path": "webpack.es2015.config.js",
"chars": 413,
"preview": "'use strict';\n\nlet path = require('path');\n\nmodule.exports = {\n entry: {\n 'car.es2015': './app/car.js'\n },\n\n outpu"
},
{
"path": "webpack.es2015.prod.config.js",
"chars": 497,
"preview": "'use strict';\n\nlet BabiliPlugin = require(\"babili-webpack-plugin\");\nlet path = require('path');\n\nmodule.exports = {\n en"
},
{
"path": "webpack.prod.config.js",
"chars": 759,
"preview": "'use strict';\n\nlet webpack = require('webpack');\nlet path = require('path');\n\nmodule.exports = {\n entry: {\n 'car.pro"
}
]
About this extraction
This page contains the full source code of the blacksonic/babel-webpack-tree-shaking GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 15 files (16.2 KB), approximately 4.6k tokens, and a symbol index with 30 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.