├── .gitignore ├── src ├── bar.js ├── foo.js ├── .DS_Store └── util.js ├── .DS_Store ├── README.md ├── package.json ├── dist2 ├── bar.js └── foo.js ├── webpack.config.js ├── webpack.config2.js └── dist ├── bar.js └── foo.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /src/bar.js: -------------------------------------------------------------------------------- 1 | import {bar} from './util' 2 | 3 | const a = bar(); -------------------------------------------------------------------------------- /src/foo.js: -------------------------------------------------------------------------------- 1 | import {foo} from './util' 2 | 3 | const a = foo(); -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WisestCoder/webpack2-tree-shaking/master/.DS_Store -------------------------------------------------------------------------------- /src/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WisestCoder/webpack2-tree-shaking/master/src/.DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## webpack-tree-shaking-demo 2 | 3 | [点击查看文档](https://github.com/WisestCoder/blog/blob/master/webpack/treeShaking.md) 4 | 5 | ### use 6 | 7 | run without uglify 8 | 9 | npm run build 10 | 11 | run with uglify 12 | 13 | npm run build2 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-tree-shaking-demo", 3 | "version": "0.0.1", 4 | "description": "webpack-tree-shaking-demo", 5 | "scripts": { 6 | "build": "webpack", 7 | "build2": "webpack --config ./webpack.config2.js" 8 | }, 9 | "dependencies": { 10 | "webpack": "^2.2.1" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/util.js: -------------------------------------------------------------------------------- 1 | export const foo = function () { 2 | return 1 3 | } 4 | 5 | export const foo2 = function () { 6 | return 1.1 7 | } 8 | 9 | export const foo3 = function () { 10 | return 1.2 11 | } 12 | 13 | export const foo4 = function () { 14 | return 1.3 15 | } 16 | 17 | export const bar = function () { 18 | return 2 19 | } 20 | 21 | export const foobar = function () { 22 | return 3 23 | } 24 | 25 | export const foobar2 = function () { 26 | return 4 27 | } 28 | 29 | export const foobar3 = function () { 30 | return 5 31 | } 32 | 33 | export const foobar4 = function () { 34 | return 6 35 | } -------------------------------------------------------------------------------- /dist2/bar.js: -------------------------------------------------------------------------------- 1 | !function(t){function e(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var n={};e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=1)}([function(t,e,n){"use strict";const r=function(){return 2};e.a=r},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(0);n.i(r.a)()}]); -------------------------------------------------------------------------------- /dist2/foo.js: -------------------------------------------------------------------------------- 1 | !function(t){function e(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var n={};e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=1)}([function(t,e,n){"use strict";const r=function(){return 1};e.a=r},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(0);n.i(r.a)()}]); -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require("webpack"); 2 | var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin; 3 | 4 | module.exports = { 5 | //插件项 6 | //页面入口文件配置 7 | entry: { 8 | foo:'./src/foo', 9 | bar:'./src/bar' 10 | }, 11 | //入口文件输出配置 12 | output: { 13 | "path": __dirname + "/dist", 14 | filename: '[name].js' 15 | }, 16 | module: { 17 | rules: [ 18 | 19 | ] 20 | }, 21 | resolveLoader: { 22 | 23 | }, 24 | resolve: { 25 | modules: [ 26 | './src', 27 | "node_modules" 28 | ], 29 | //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名 30 | extensions: ['.js', '.json'], 31 | //模块别名定义，方便后续直接引用别名，无须多写长长的地址 32 | alias: { 33 | Util : 'src/util.js', 34 | } 35 | } 36 | }; -------------------------------------------------------------------------------- /webpack.config2.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin; 3 | 4 | module.exports = [{ 5 | entry: { 6 | bar:'./src/bar' 7 | }, 8 | output: { 9 | "path": __dirname + "/dist2", 10 | filename: '[name].js' 11 | }, 12 | module: { 13 | rules: [ 14 | 15 | ] 16 | }, 17 | resolveLoader: { 18 | 19 | }, 20 | plugins: [ 21 | new UglifyJsPlugin({ 22 | compress: { 23 | warnings: false 24 | } 25 | }) 26 | ], 27 | resolve: { 28 | modules: [ 29 | './src', 30 | "node_modules" 31 | ], 32 | extensions: ['.js', '.json'], 33 | alias: { 34 | Util : 'src/util.js', 35 | } 36 | } 37 | }, 38 | { 39 | entry: { 40 | foo:'./src/foo' 41 | }, 42 | //入口文件输出配置 43 | output: { 44 | "path": __dirname + "/dist2", 45 | filename: '[name].js' 46 | }, 47 | module: { 48 | rules: [ 49 | 50 | ] 51 | }, 52 | resolveLoader: { 53 | 54 | }, 55 | plugins: [ 56 | new UglifyJsPlugin({ 57 | compress: { 58 | warnings: false 59 | } 60 | }) 61 | ], 62 | resolve: { 63 | modules: [ 64 | './src', 65 | "node_modules" 66 | ], 67 | extensions: ['.js', '.json'], 68 | alias: { 69 | Util : 'src/util.js', 70 | } 71 | } 72 | }]; -------------------------------------------------------------------------------- /dist/bar.js: -------------------------------------------------------------------------------- 1 | /******/ (function(modules) { // webpackBootstrap 2 | /******/ // The module cache 3 | /******/ var installedModules = {}; 4 | /******/ 5 | /******/ // The require function 6 | /******/ function __webpack_require__(moduleId) { 7 | /******/ 8 | /******/ // Check if module is in cache 9 | /******/ if(installedModules[moduleId]) { 10 | /******/ return installedModules[moduleId].exports; 11 | /******/ } 12 | /******/ // Create a new module (and put it into the cache) 13 | /******/ var module = installedModules[moduleId] = { 14 | /******/ i: moduleId, 15 | /******/ l: false, 16 | /******/ exports: {} 17 | /******/ }; 18 | /******/ 19 | /******/ // Execute the module function 20 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 21 | /******/ 22 | /******/ // Flag the module as loaded 23 | /******/ module.l = true; 24 | /******/ 25 | /******/ // Return the exports of the module 26 | /******/ return module.exports; 27 | /******/ } 28 | /******/ 29 | /******/ 30 | /******/ // expose the modules object (__webpack_modules__) 31 | /******/ __webpack_require__.m = modules; 32 | /******/ 33 | /******/ // expose the module cache 34 | /******/ __webpack_require__.c = installedModules; 35 | /******/ 36 | /******/ // identity function for calling harmony imports with the correct context 37 | /******/ __webpack_require__.i = function(value) { return value; }; 38 | /******/ 39 | /******/ // define getter function for harmony exports 40 | /******/ __webpack_require__.d = function(exports, name, getter) { 41 | /******/ if(!__webpack_require__.o(exports, name)) { 42 | /******/ Object.defineProperty(exports, name, { 43 | /******/ configurable: false, 44 | /******/ enumerable: true, 45 | /******/ get: getter 46 | /******/ }); 47 | /******/ } 48 | /******/ }; 49 | /******/ 50 | /******/ // getDefaultExport function for compatibility with non-harmony modules 51 | /******/ __webpack_require__.n = function(module) { 52 | /******/ var getter = module && module.__esModule ? 53 | /******/ function getDefault() { return module['default']; } : 54 | /******/ function getModuleExports() { return module; }; 55 | /******/ __webpack_require__.d(getter, 'a', getter); 56 | /******/ return getter; 57 | /******/ }; 58 | /******/ 59 | /******/ // Object.prototype.hasOwnProperty.call 60 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 61 | /******/ 62 | /******/ // __webpack_public_path__ 63 | /******/ __webpack_require__.p = ""; 64 | /******/ 65 | /******/ // Load entry module and return exports 66 | /******/ return __webpack_require__(__webpack_require__.s = 1); 67 | /******/ }) 68 | /************************************************************************/ 69 | /******/ ([ 70 | /* 0 */ 71 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 72 | 73 | "use strict"; 74 | const foo = function () { 75 | return 1 76 | } 77 | /* harmony export (immutable) */ __webpack_exports__["b"] = foo; 78 | 79 | 80 | const foo2 = function () { 81 | return 1.1 82 | } 83 | /* unused harmony export foo2 */ 84 | 85 | 86 | const foo3 = function () { 87 | return 1.2 88 | } 89 | /* unused harmony export foo3 */ 90 | 91 | 92 | const foo4 = function () { 93 | return 1.3 94 | } 95 | /* unused harmony export foo4 */ 96 | 97 | 98 | const bar = function () { 99 | return 2 100 | } 101 | /* harmony export (immutable) */ __webpack_exports__["a"] = bar; 102 | 103 | 104 | const foobar = function () { 105 | return 3 106 | } 107 | /* unused harmony export foobar */ 108 | 109 | 110 | const foobar2 = function () { 111 | return 4 112 | } 113 | /* unused harmony export foobar2 */ 114 | 115 | 116 | const foobar3 = function () { 117 | return 5 118 | } 119 | /* unused harmony export foobar3 */ 120 | 121 | 122 | const foobar4 = function () { 123 | return 6 124 | } 125 | /* unused harmony export foobar4 */ 126 | 127 | 128 | /***/ }), 129 | /* 1 */ 130 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 131 | 132 | "use strict"; 133 | Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); 134 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__util__ = __webpack_require__(0); 135 | 136 | 137 | const a = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__util__["a" /* bar */])(); 138 | 139 | /***/ }) 140 | /******/ ]); -------------------------------------------------------------------------------- /dist/foo.js: -------------------------------------------------------------------------------- 1 | /******/ (function(modules) { // webpackBootstrap 2 | /******/ // The module cache 3 | /******/ var installedModules = {}; 4 | /******/ 5 | /******/ // The require function 6 | /******/ function __webpack_require__(moduleId) { 7 | /******/ 8 | /******/ // Check if module is in cache 9 | /******/ if(installedModules[moduleId]) { 10 | /******/ return installedModules[moduleId].exports; 11 | /******/ } 12 | /******/ // Create a new module (and put it into the cache) 13 | /******/ var module = installedModules[moduleId] = { 14 | /******/ i: moduleId, 15 | /******/ l: false, 16 | /******/ exports: {} 17 | /******/ }; 18 | /******/ 19 | /******/ // Execute the module function 20 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 21 | /******/ 22 | /******/ // Flag the module as loaded 23 | /******/ module.l = true; 24 | /******/ 25 | /******/ // Return the exports of the module 26 | /******/ return module.exports; 27 | /******/ } 28 | /******/ 29 | /******/ 30 | /******/ // expose the modules object (__webpack_modules__) 31 | /******/ __webpack_require__.m = modules; 32 | /******/ 33 | /******/ // expose the module cache 34 | /******/ __webpack_require__.c = installedModules; 35 | /******/ 36 | /******/ // identity function for calling harmony imports with the correct context 37 | /******/ __webpack_require__.i = function(value) { return value; }; 38 | /******/ 39 | /******/ // define getter function for harmony exports 40 | /******/ __webpack_require__.d = function(exports, name, getter) { 41 | /******/ if(!__webpack_require__.o(exports, name)) { 42 | /******/ Object.defineProperty(exports, name, { 43 | /******/ configurable: false, 44 | /******/ enumerable: true, 45 | /******/ get: getter 46 | /******/ }); 47 | /******/ } 48 | /******/ }; 49 | /******/ 50 | /******/ // getDefaultExport function for compatibility with non-harmony modules 51 | /******/ __webpack_require__.n = function(module) { 52 | /******/ var getter = module && module.__esModule ? 53 | /******/ function getDefault() { return module['default']; } : 54 | /******/ function getModuleExports() { return module; }; 55 | /******/ __webpack_require__.d(getter, 'a', getter); 56 | /******/ return getter; 57 | /******/ }; 58 | /******/ 59 | /******/ // Object.prototype.hasOwnProperty.call 60 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 61 | /******/ 62 | /******/ // __webpack_public_path__ 63 | /******/ __webpack_require__.p = ""; 64 | /******/ 65 | /******/ // Load entry module and return exports 66 | /******/ return __webpack_require__(__webpack_require__.s = 2); 67 | /******/ }) 68 | /************************************************************************/ 69 | /******/ ([ 70 | /* 0 */ 71 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 72 | 73 | "use strict"; 74 | const foo = function () { 75 | return 1 76 | } 77 | /* harmony export (immutable) */ __webpack_exports__["b"] = foo; 78 | 79 | 80 | const foo2 = function () { 81 | return 1.1 82 | } 83 | /* unused harmony export foo2 */ 84 | 85 | 86 | const foo3 = function () { 87 | return 1.2 88 | } 89 | /* unused harmony export foo3 */ 90 | 91 | 92 | const foo4 = function () { 93 | return 1.3 94 | } 95 | /* unused harmony export foo4 */ 96 | 97 | 98 | const bar = function () { 99 | return 2 100 | } 101 | /* harmony export (immutable) */ __webpack_exports__["a"] = bar; 102 | 103 | 104 | const foobar = function () { 105 | return 3 106 | } 107 | /* unused harmony export foobar */ 108 | 109 | 110 | const foobar2 = function () { 111 | return 4 112 | } 113 | /* unused harmony export foobar2 */ 114 | 115 | 116 | const foobar3 = function () { 117 | return 5 118 | } 119 | /* unused harmony export foobar3 */ 120 | 121 | 122 | const foobar4 = function () { 123 | return 6 124 | } 125 | /* unused harmony export foobar4 */ 126 | 127 | 128 | /***/ }), 129 | /* 1 */, 130 | /* 2 */ 131 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 132 | 133 | "use strict"; 134 | Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); 135 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__util__ = __webpack_require__(0); 136 | 137 | 138 | const a = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__util__["b" /* foo */])(); 139 | 140 | /***/ }) 141 | /******/ ]); --------------------------------------------------------------------------------