├── .gitignore
├── LICENSE
├── README.md
├── html
└── index.html
├── js
├── helpers.js
└── main.js
├── package.json
└── webpack.config.js
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | .idea
3 | node_modules
4 |
5 | build
6 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 Axel Rauschmayer
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Demo: tree-shaking
2 |
3 | This project demonstrates how to do tree-shaking (removal of unused exports) with webpack 2 and Babel 6.
4 |
5 | Installation:
6 |
7 | ```
8 | cd tree-shaking-demo/
9 | npm install
10 | ```
11 |
12 | There are two ways in which you can build and run the web app:
13 |
14 | * Build once:
15 | * `npm run build`
16 | * Open `build/index.html`
17 | * Watch files continuously, rebuild incrementally, whenever one of them changes:
18 | * `npm run watch`
19 | * Open `build/index.html`, manually reload page in browser whenever there was a change
20 |
--------------------------------------------------------------------------------
/html/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | webpack Babel demo
6 |
7 |
8 |
9 | webpack Babel demo
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/js/helpers.js:
--------------------------------------------------------------------------------
1 | export function foo() {
2 | return 'foo';
3 | }
4 | export function bar() {
5 | return 'bar';
6 | }
--------------------------------------------------------------------------------
/js/main.js:
--------------------------------------------------------------------------------
1 | import {foo} from './helpers';
2 |
3 | let elem = document.getElementById('output');
4 | elem.innerHTML = `Output: ${foo()}`;
5 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "devDependencies": {
3 | "babel-loader": "^6.2.0",
4 | "babel-preset-es2015": "^6.3.13",
5 | "babel-polyfill": "^6.3.14",
6 |
7 | "webpack": "^2.0.1-beta",
8 | "copy-webpack-plugin": "^0.3.3"
9 | },
10 | "scripts": {
11 | "build": "webpack --optimize-minimize",
12 | "watch": "webpack --optimize-minimize --watch"
13 | },
14 | "author": "Axel Rauschmayer",
15 | "license": "MIT"
16 | }
17 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | /* global __dirname */
2 |
3 | var path = require('path');
4 |
5 | var webpack = require('webpack');
6 | var CopyWebpackPlugin = require('copy-webpack-plugin');
7 |
8 | var dir_js = path.resolve(__dirname, 'js');
9 | var dir_html = path.resolve(__dirname, 'html');
10 | var dir_build = path.resolve(__dirname, 'build');
11 |
12 | module.exports = {
13 | entry: path.resolve(dir_js, 'main.js'),
14 | output: {
15 | path: dir_build,
16 | filename: 'bundle.js'
17 | },
18 | devServer: {
19 | contentBase: dir_build,
20 | },
21 | module: {
22 | loaders: [
23 | {
24 | loader: 'babel-loader',
25 | test: dir_js,
26 | query: {
27 | //presets: ['es2015'],
28 |
29 | // All of the plugins of babel-preset-es2015,
30 | // minus babel-plugin-transform-es2015-modules-commonjs
31 | plugins: [
32 | 'transform-es2015-template-literals',
33 | 'transform-es2015-literals',
34 | 'transform-es2015-function-name',
35 | 'transform-es2015-arrow-functions',
36 | 'transform-es2015-block-scoped-functions',
37 | 'transform-es2015-classes',
38 | 'transform-es2015-object-super',
39 | 'transform-es2015-shorthand-properties',
40 | 'transform-es2015-computed-properties',
41 | 'transform-es2015-for-of',
42 | 'transform-es2015-sticky-regex',
43 | 'transform-es2015-unicode-regex',
44 | 'check-es2015-constants',
45 | 'transform-es2015-spread',
46 | 'transform-es2015-parameters',
47 | 'transform-es2015-destructuring',
48 | 'transform-es2015-block-scoping',
49 | 'transform-es2015-typeof-symbol',
50 | ['transform-regenerator', { async: false, asyncGenerators: false }],
51 | ],
52 | },
53 | }
54 | ]
55 | },
56 | plugins: [
57 | // Simply copies the files over
58 | new CopyWebpackPlugin([
59 | { from: dir_html } // to: output.path
60 | ]),
61 | // Avoid publishing files when compilation fails
62 | new webpack.NoErrorsPlugin()
63 | ],
64 | stats: {
65 | // Nice colored output
66 | colors: true
67 | },
68 | // Create source maps for the bundle
69 | devtool: 'source-map',
70 | };
71 |
--------------------------------------------------------------------------------