├── .gitignore
├── README.md
├── code-splitting
├── .gitignore
├── README.md
├── build
│ ├── 1.1.js
│ ├── 2.2.js
│ └── index.js
├── index.html
├── package.json
├── src
│ ├── components
│ │ ├── body.js
│ │ ├── body2.js
│ │ ├── footer.js
│ │ └── header.js
│ └── index.js
└── webpack.config.js
├── dedupeplugin
├── .gitignore
├── README.md
├── build
│ └── index.js
├── package.json
├── src
│ ├── components
│ │ ├── a.js
│ │ ├── b.js
│ │ └── c.js
│ └── index.js
└── webpack.config.js
├── define-plugin
├── .gitignore
├── README.md
├── index.html
├── package.json
├── src
│ ├── components
│ │ ├── body.js
│ │ ├── footer.js
│ │ └── header.js
│ └── index.js
└── webpack.config.js
├── dll-bundles
├── .gitignore
├── README.md
├── dist
│ └── bunld.js
├── dll
│ ├── manifest.json
│ └── vendor.js
├── index.html
├── index.js
├── package.json
└── webpack.config.prod.js
├── externals
├── .gitignore
├── README.md
├── build
│ └── index.js
├── index.html
├── package.json
├── src
│ ├── components
│ │ ├── body.js
│ │ ├── footer.js
│ │ └── header.js
│ └── index.js
└── webpack.config.js
├── happypack
├── .gitignore
├── .happypack
│ ├── cache--1.json
│ ├── s--605522759
│ └── s--605522759.map
├── README.md
├── build
│ └── index.js
├── package.json
├── src
│ ├── components
│ │ ├── body.js
│ │ ├── footer.js
│ │ └── header.js
│ └── index.js
└── webpack.config.js
├── no-parse
├── .gitignore
├── README.md
├── build
│ └── index.js
├── index.html
├── package.json
├── src
│ ├── components
│ │ ├── body.js
│ │ ├── footer.js
│ │ └── header.js
│ └── index.js
└── webpack.config.js
├── parallel-webpack
├── .gitignore
├── README.md
├── build
│ ├── home.js
│ ├── item.js
│ └── list.js
├── package.json
├── src
│ ├── components
│ │ ├── body.js
│ │ ├── footer.js
│ │ └── header.js
│ └── container
│ │ ├── home.js
│ │ ├── item.js
│ │ └── list.js
└── webpack.config.js
├── prefetch-plugin
├── .gitignore
├── README.md
├── build
│ └── index.js
├── package.json
├── src
│ ├── components
│ │ ├── app.js
│ │ ├── header.js
│ │ └── nav.js
│ └── index.js
├── stat.json
└── webpack.config.js
├── tree-shaking
├── .gitignore
├── README.md
├── build
│ └── index.js
├── package.json
├── src
│ ├── components
│ │ ├── body.js
│ │ ├── footer.js
│ │ └── header.js
│ └── index.js
└── webpack.config.js
├── uglifyjs
├── .gitignore
├── README.md
├── build
│ └── index.js
├── index.html
├── package.json
├── src
│ └── index.js
└── webpack.config.js
└── webpack2.0
├── .gitignore
├── README.md
├── build
└── index.js
├── index.html
├── package.json
├── src
├── components
│ ├── body.js
│ ├── footer.js
│ └── header.js
└── index.js
└── webpack.config.js
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/**/*
2 | npm-debug.log
3 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Webpack Optimize Example
2 |
3 | Follow these examples to make your Webpack builds faster 🚀 and files smaller 🐜
4 |
5 | ## Examples
6 |
7 | * [code-splitting](https://github.com/FrendEr/webpack-optimize-example/tree/master/code-splitting)
8 | * [dedupeplugin](https://github.com/FrendEr/webpack-optimize-example/tree/master/dedupeplugin)
9 | * [define-plugin](https://github.com/FrendEr/webpack-optimize-example/tree/master/define-plugin)
10 | * [dll-bundles](https://github.com/FrendEr/webpack-optimize-example/tree/master/dll-bundles)
11 | * [externals](https://github.com/FrendEr/webpack-optimize-example/tree/master/externals)
12 | * [happypack](https://github.com/FrendEr/webpack-optimize-example/tree/master/happypack)
13 | * [no-parse](https://github.com/FrendEr/webpack-optimize-example/tree/master/no-parse)
14 | * [parallel-webpack](https://github.com/FrendEr/webpack-optimize-example/tree/master/parallel-webpack)
15 | * [prefetch-plugin](https://github.com/FrendEr/webpack-optimize-example/tree/master/prefetch-plugin)
16 | * [tree-shaking](https://github.com/FrendEr/webpack-optimize-example/tree/master/tree-shaking)
17 | * [uglifyjs](https://github.com/FrendEr/webpack-optimize-example/tree/master/uglifyjs)
18 | * [webpack2.0](https://github.com/FrendEr/webpack-optimize-example/tree/master/webpack2.0)
19 |
20 | ## How to run
21 |
22 | * checkout this repository
23 |
24 | ```
25 | git clone https://github.com/FrendEr/webpack-optimize-example.git
26 | ```
27 |
28 | * install dependencies
29 |
30 | ```
31 | cd ./exmaple && npm install
32 | ```
33 |
34 | * run build
35 |
36 | ```
37 | npm run build
38 | ```
39 |
40 | ## License
41 |
42 | MIT
43 |
--------------------------------------------------------------------------------
/code-splitting/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 |
--------------------------------------------------------------------------------
/code-splitting/README.md:
--------------------------------------------------------------------------------
1 | # Code Splitting
2 |
--------------------------------------------------------------------------------
/code-splitting/build/1.1.js:
--------------------------------------------------------------------------------
1 | webpackJsonp([1],{
2 |
3 | /***/ 3:
4 | /***/ function(module, exports) {
5 |
6 | 'use strict';
7 |
8 | Object.defineProperty(exports, "__esModule", {
9 | value: true
10 | });
11 | exports.default = 'body';
12 | module.exports = exports['default'];
13 |
14 | /***/ }
15 |
16 | });
--------------------------------------------------------------------------------
/code-splitting/build/2.2.js:
--------------------------------------------------------------------------------
1 | webpackJsonp([2],{
2 |
3 | /***/ 4:
4 | /***/ function(module, exports) {
5 |
6 | 'use strict';
7 |
8 | Object.defineProperty(exports, "__esModule", {
9 | value: true
10 | });
11 | exports.default = 'body2';
12 | module.exports = exports['default'];
13 |
14 | /***/ }
15 |
16 | });
--------------------------------------------------------------------------------
/code-splitting/build/index.js:
--------------------------------------------------------------------------------
1 | /******/ (function(modules) { // webpackBootstrap
2 | /******/ // install a JSONP callback for chunk loading
3 | /******/ var parentJsonpFunction = window["webpackJsonp"];
4 | /******/ window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules) {
5 | /******/ // add "moreModules" to the modules object,
6 | /******/ // then flag all "chunkIds" as loaded and fire callback
7 | /******/ var moduleId, chunkId, i = 0, callbacks = [];
8 | /******/ for(;i < chunkIds.length; i++) {
9 | /******/ chunkId = chunkIds[i];
10 | /******/ if(installedChunks[chunkId])
11 | /******/ callbacks.push.apply(callbacks, installedChunks[chunkId]);
12 | /******/ installedChunks[chunkId] = 0;
13 | /******/ }
14 | /******/ for(moduleId in moreModules) {
15 | /******/ modules[moduleId] = moreModules[moduleId];
16 | /******/ }
17 | /******/ if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);
18 | /******/ while(callbacks.length)
19 | /******/ callbacks.shift().call(null, __webpack_require__);
20 |
21 | /******/ };
22 |
23 | /******/ // The module cache
24 | /******/ var installedModules = {};
25 |
26 | /******/ // object to store loaded and loading chunks
27 | /******/ // "0" means "already loaded"
28 | /******/ // Array means "loading", array contains callbacks
29 | /******/ var installedChunks = {
30 | /******/ 0:0
31 | /******/ };
32 |
33 | /******/ // The require function
34 | /******/ function __webpack_require__(moduleId) {
35 |
36 | /******/ // Check if module is in cache
37 | /******/ if(installedModules[moduleId])
38 | /******/ return installedModules[moduleId].exports;
39 |
40 | /******/ // Create a new module (and put it into the cache)
41 | /******/ var module = installedModules[moduleId] = {
42 | /******/ exports: {},
43 | /******/ id: moduleId,
44 | /******/ loaded: false
45 | /******/ };
46 |
47 | /******/ // Execute the module function
48 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
49 |
50 | /******/ // Flag the module as loaded
51 | /******/ module.loaded = true;
52 |
53 | /******/ // Return the exports of the module
54 | /******/ return module.exports;
55 | /******/ }
56 |
57 | /******/ // This file contains only the entry chunk.
58 | /******/ // The chunk loading function for additional chunks
59 | /******/ __webpack_require__.e = function requireEnsure(chunkId, callback) {
60 | /******/ // "0" is the signal for "already loaded"
61 | /******/ if(installedChunks[chunkId] === 0)
62 | /******/ return callback.call(null, __webpack_require__);
63 |
64 | /******/ // an array means "currently loading".
65 | /******/ if(installedChunks[chunkId] !== undefined) {
66 | /******/ installedChunks[chunkId].push(callback);
67 | /******/ } else {
68 | /******/ // start chunk loading
69 | /******/ installedChunks[chunkId] = [callback];
70 | /******/ var head = document.getElementsByTagName('head')[0];
71 | /******/ var script = document.createElement('script');
72 | /******/ script.type = 'text/javascript';
73 | /******/ script.charset = 'utf-8';
74 | /******/ script.async = true;
75 |
76 | /******/ script.src = __webpack_require__.p + "" + chunkId + "." + ({}[chunkId]||chunkId) + ".js";
77 | /******/ head.appendChild(script);
78 | /******/ }
79 | /******/ };
80 |
81 | /******/ // expose the modules object (__webpack_modules__)
82 | /******/ __webpack_require__.m = modules;
83 |
84 | /******/ // expose the module cache
85 | /******/ __webpack_require__.c = installedModules;
86 |
87 | /******/ // __webpack_public_path__
88 | /******/ __webpack_require__.p = "";
89 |
90 | /******/ // Load entry module and return exports
91 | /******/ return __webpack_require__(0);
92 | /******/ })
93 | /************************************************************************/
94 | /******/ ([
95 | /* 0 */
96 | /***/ function(module, exports, __webpack_require__) {
97 |
98 | 'use strict';
99 |
100 | var _header = __webpack_require__(1);
101 |
102 | var _header2 = _interopRequireDefault(_header);
103 |
104 | var _footer = __webpack_require__(2);
105 |
106 | var _footer2 = _interopRequireDefault(_footer);
107 |
108 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
109 |
110 | if (location.hash == '#body') {
111 | __webpack_require__.e/* require */(1, function(__webpack_require__) { var __WEBPACK_AMD_REQUIRE_ARRAY__ = []; (function (require) {
112 | var body = __webpack_require__(3);
113 | }.apply(null, __WEBPACK_AMD_REQUIRE_ARRAY__));});
114 | }
115 |
116 | if (location.hash == '#body2') {
117 | __webpack_require__.e/* require */(2, function(__webpack_require__) { var __WEBPACK_AMD_REQUIRE_ARRAY__ = []; (function (require) {
118 | var body = __webpack_require__(4);
119 | }.apply(null, __WEBPACK_AMD_REQUIRE_ARRAY__));});
120 | }
121 |
122 | /***/ },
123 | /* 1 */
124 | /***/ function(module, exports) {
125 |
126 | 'use strict';
127 |
128 | Object.defineProperty(exports, "__esModule", {
129 | value: true
130 | });
131 | exports.default = 'header';
132 | module.exports = exports['default'];
133 |
134 | /***/ },
135 | /* 2 */
136 | /***/ function(module, exports) {
137 |
138 | 'use strict';
139 |
140 | Object.defineProperty(exports, "__esModule", {
141 | value: true
142 | });
143 | exports.default = 'footer';
144 | module.exports = exports['default'];
145 |
146 | /***/ }
147 | /******/ ]);
--------------------------------------------------------------------------------
/code-splitting/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | code splitting
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/code-splitting/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "webpack-base",
3 | "version": "0.0.1",
4 | "description": "a webpack base repo",
5 | "main": "build/index.js",
6 | "scripts": {
7 | "clean": "rimraf ./build",
8 | "prebuild": "npm run clean",
9 | "build": "webpack --progress --profile"
10 | },
11 | "repository": {
12 | "type": "git",
13 | "url": "git+https://github.com/FrendEr/webpack-base.git"
14 | },
15 | "author": "FrendEr",
16 | "license": "MIT",
17 | "bugs": {
18 | "url": "https://github.com/FrendEr/webpack-base/issues"
19 | },
20 | "homepage": "https://github.com/FrendEr/webpack-base#readme",
21 | "devDependencies": {
22 | "babel-loader": "^6.2.4",
23 | "babel-plugin-add-module-exports": "^0.2.1",
24 | "babel-preset-es2015": "^6.9.0",
25 | "babel-preset-react": "^6.5.0",
26 | "babel-preset-stage-0": "^6.5.0",
27 | "extract-text-webpack-plugin": "^1.0.1",
28 | "rimraf": "^2.5.2",
29 | "webpack": "^1.13.1"
30 | },
31 | "dependencies": {
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/code-splitting/src/components/body.js:
--------------------------------------------------------------------------------
1 | export default 'body';
2 |
--------------------------------------------------------------------------------
/code-splitting/src/components/body2.js:
--------------------------------------------------------------------------------
1 | export default 'body2';
2 |
--------------------------------------------------------------------------------
/code-splitting/src/components/footer.js:
--------------------------------------------------------------------------------
1 | export default 'footer';
2 |
--------------------------------------------------------------------------------
/code-splitting/src/components/header.js:
--------------------------------------------------------------------------------
1 | export default 'header';
2 |
--------------------------------------------------------------------------------
/code-splitting/src/index.js:
--------------------------------------------------------------------------------
1 | import Header from './components/header';
2 | import Footer from './components/footer';
3 |
4 | if (location.hash == '#body') {
5 | require([], function(require) {
6 | let body = require('./components/body');
7 | });
8 | }
9 |
10 | if (location.hash == '#body2') {
11 | require([], function(require) {
12 | let body = require('./components/body2');
13 | });
14 | }
15 |
--------------------------------------------------------------------------------
/code-splitting/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 |
3 | /**
4 | * loaders list
5 | */
6 | const loaders = [
7 | {
8 | test: /\.jsx?$/,
9 | exclude: /node_modules/,
10 | loader: 'babel-loader',
11 | query: {
12 | presets: ['react', 'es2015', 'stage-0'],
13 | plugins: ['add-module-exports']
14 | }
15 | }
16 | ];
17 |
18 | /**
19 | * plugins list
20 | */
21 | const plugins = [];
22 |
23 | module.exports = {
24 | entry: {
25 | index: path.join(__dirname, 'src/index.js')
26 | },
27 | output: {
28 | path: path.join(__dirname, 'build'),
29 | filename: '[name].js'
30 | },
31 | module: {
32 | loaders: loaders
33 | },
34 | plugins: plugins
35 | };
36 |
--------------------------------------------------------------------------------
/dedupeplugin/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 |
--------------------------------------------------------------------------------
/dedupeplugin/README.md:
--------------------------------------------------------------------------------
1 | # DedupePlugin
2 |
3 | ## 原理
4 |
5 | * `Webpack` 在编译文件的时候，会为每个文件生成一个 `hash` 值，如下面的代码
6 |
7 | ```
8 | // https://github.com/webpack/webpack/blob/master/lib/NormalModule.js#L312
9 | NormalModule.prototype.getSourceHash = function() {
10 | if(!this._source) return "";
11 | var hash = require("crypto").createHash("md5");
12 | hash.update(this._source.source());
13 | return hash.digest("hex");
14 | };
15 | ```
16 |
17 | 所以，不同的文件内容编译出来的 `hash` 值是不一样的。句末空格不会影响文件内容，但是制表符会产生影响。
18 |
19 | * `DedupePlugin` 插件在去重的时候，就是通过判断一个 `hash` 值对应的模块是否已经存在，存在则标记为重复
20 |
21 | ```
22 | // https://github.com/webpack/webpack/blob/master/lib/optimize/DedupePlugin.js#L23
23 | var dupModule = modulesByHash[hash];
24 | if(dupModule) {
25 | if(dupModule.duplicates) {
26 | dupModule.duplicates.push(module);
27 | module.duplicates = dupModule.duplicates;
28 | } else {
29 | allDups.push(module.duplicates = dupModule.duplicates = [dupModule, module]);
30 | }
31 | } else {
32 | modulesByHash[hash] = module;
33 | }
34 | ```
35 |
--------------------------------------------------------------------------------
/dedupeplugin/build/index.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 | /******/ exports: {},
15 | /******/ id: moduleId,
16 | /******/ loaded: false
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.loaded = 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 | /******/ // __webpack_public_path__
37 | /******/ __webpack_require__.p = "";
38 |
39 | /******/ // Load entry module and return exports
40 | /******/ return __webpack_require__(0);
41 | /******/ })
42 | /************************************************************************/
43 | /******/ ((function(modules) {
44 | // Check all modules for deduplicated modules
45 | for(var i in modules) {
46 | if(Object.prototype.hasOwnProperty.call(modules, i)) {
47 | switch(typeof modules[i]) {
48 | case "function": break;
49 | case "object":
50 | // Module can be created from a template
51 | modules[i] = (function(_m) {
52 | var args = _m.slice(1), fn = modules[_m[0]];
53 | return function (a,b,c) {
54 | fn.apply(this, [a,b,c].concat(args));
55 | };
56 | }(modules[i]));
57 | break;
58 | default:
59 | // Module is a copy of another module
60 | modules[i] = modules[modules[i]];
61 | break;
62 | }
63 | }
64 | }
65 | return modules;
66 | }([
67 | /* 0 */
68 | /***/ function(module, exports, __webpack_require__) {
69 |
70 | 'use strict';
71 |
72 | var _a = __webpack_require__(1);
73 |
74 | var _a2 = _interopRequireDefault(_a);
75 |
76 | var _b = __webpack_require__(3);
77 |
78 | var _b2 = _interopRequireDefault(_b);
79 |
80 | var _c = __webpack_require__(2);
81 |
82 | var _c2 = _interopRequireDefault(_c);
83 |
84 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
85 |
86 | /***/ },
87 | /* 1 */
88 | /***/ function(module, exports, __webpack_require__) {
89 |
90 | 'use strict';
91 |
92 | Object.defineProperty(exports, "__esModule", {
93 | value: true
94 | });
95 |
96 | var _c = __webpack_require__(2);
97 |
98 | var _c2 = _interopRequireDefault(_c);
99 |
100 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
101 |
102 | exports.default = 'a';
103 | module.exports = exports['default'];
104 |
105 | /***/ },
106 | /* 2 */
107 | /***/ function(module, exports) {
108 |
109 | 'use strict';
110 |
111 | Object.defineProperty(exports, "__esModule", {
112 | value: true
113 | });
114 | exports.default = 'b = c';
115 | module.exports = exports['default'];
116 |
117 | /***/ },
118 | /* 3 */
119 | 2
120 | /******/ ])));
--------------------------------------------------------------------------------
/dedupeplugin/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "webpack-base",
3 | "version": "0.0.1",
4 | "description": "a webpack base repo",
5 | "main": "index.js",
6 | "scripts": {
7 | "clean": "rimraf ./build",
8 | "prebuild": "npm run clean",
9 | "build": "webpack --progress --profile"
10 | },
11 | "repository": {
12 | "type": "git",
13 | "url": "git+https://github.com/FrendEr/webpack-base.git"
14 | },
15 | "author": "FrendEr",
16 | "license": "MIT",
17 | "bugs": {
18 | "url": "https://github.com/FrendEr/webpack-base/issues"
19 | },
20 | "homepage": "https://github.com/FrendEr/webpack-base#readme",
21 | "devDependencies": {
22 | "babel-loader": "^6.2.4",
23 | "babel-plugin-add-module-exports": "^0.2.1",
24 | "babel-preset-es2015": "^6.9.0",
25 | "babel-preset-react": "^6.5.0",
26 | "babel-preset-stage-0": "^6.5.0",
27 | "extract-text-webpack-plugin": "^1.0.1",
28 | "rimraf": "^2.5.2",
29 | "webpack": "^1.13.1"
30 | },
31 | "dependencies": {
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/dedupeplugin/src/components/a.js:
--------------------------------------------------------------------------------
1 | import c from './c';
2 | export default 'a';
3 |
--------------------------------------------------------------------------------
/dedupeplugin/src/components/b.js:
--------------------------------------------------------------------------------
1 | export default 'b = c';
2 |
--------------------------------------------------------------------------------
/dedupeplugin/src/components/c.js:
--------------------------------------------------------------------------------
1 | export default 'b = c';
2 |
--------------------------------------------------------------------------------
/dedupeplugin/src/index.js:
--------------------------------------------------------------------------------
1 | import a from './components/a';
2 | import b from './components/b';
3 | import c from './components/c';
4 |
--------------------------------------------------------------------------------
/dedupeplugin/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const webpack = require('webpack');
3 |
4 | /**
5 | * loaders list
6 | */
7 | const loaders = [
8 | {
9 | test: /\.jsx?$/,
10 | exclude: /node_modules/,
11 | loader: 'babel-loader',
12 | query: {
13 | presets: ['react', 'es2015', 'stage-0'],
14 | plugins: ['add-module-exports']
15 | }
16 | }
17 | ];
18 |
19 | /**
20 | * plugins list
21 | */
22 | const plugins = [
23 | new webpack.optimize.DedupePlugin()
24 | ];
25 |
26 | module.exports = {
27 | entry: {
28 | index: path.join(__dirname, 'src/index.js')
29 | },
30 | output: {
31 | path: path.join(__dirname, 'build'),
32 | filename: '[name].js'
33 | },
34 | module: {
35 | loaders: loaders
36 | },
37 | plugins: plugins
38 | };
39 |
--------------------------------------------------------------------------------
/define-plugin/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | build/
--------------------------------------------------------------------------------
/define-plugin/README.md:
--------------------------------------------------------------------------------
1 | # webpack.DefinePlugin
2 |
3 | Using DefinePlugin and setting the NODE_ENV to production will enable dead code elimination on conditionals in react core and shrink final bundle size
4 |
5 | This also works for your own code wrapped in process.env.NODE_ENV conditionals.
6 |
7 | Webpack must be run in production mode for this to work with `-p`
8 |
9 | ```
10 | // plugin
11 | new webpack.DefinePlugin({
12 | 'process.env': {
13 | 'NODE_ENV': '"production"'
14 | }
15 | })
16 | ```
17 |
18 | ```
19 | // package.json
20 | "scripts": {
21 | "clean": "rimraf ./build",
22 | "prebuild": "npm run clean",
23 | "build": "webpack -p --progress --profile"
24 | },
25 | ```
26 |
27 | More info here: https://github.com/petehunt/webpack-howto#6-feature-flags
--------------------------------------------------------------------------------
/define-plugin/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | DefinePlugin Example
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/define-plugin/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "webpack-base",
3 | "version": "0.0.1",
4 | "description": "a webpack base repo",
5 | "main": "build/index.js",
6 | "scripts": {
7 | "clean": "rimraf ./build",
8 | "prebuild": "npm run clean",
9 | "buildNonProd": "webpack --progress --profile",
10 | "build": "webpack -p --progress --profile"
11 | },
12 | "repository": {
13 | "type": "git",
14 | "url": "git+https://github.com/FrendEr/webpack-base.git"
15 | },
16 | "author": "FrendEr",
17 | "license": "MIT",
18 | "bugs": {
19 | "url": "https://github.com/FrendEr/webpack-base/issues"
20 | },
21 | "homepage": "https://github.com/FrendEr/webpack-base#readme",
22 | "devDependencies": {
23 | "babel-loader": "^6.2.4",
24 | "babel-plugin-add-module-exports": "^0.2.1",
25 | "babel-preset-es2015": "^6.9.0",
26 | "babel-preset-react": "^6.5.0",
27 | "babel-preset-stage-0": "^6.5.0",
28 | "extract-text-webpack-plugin": "^1.0.1",
29 | "rimraf": "^2.5.2",
30 | "webpack": "^1.13.1"
31 | },
32 | "dependencies": {
33 | "lodash": "^4.13.1",
34 | "react": "^15.1.0",
35 | "react-dom": "^15.1.0"
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/define-plugin/src/components/body.js:
--------------------------------------------------------------------------------
1 | export default 'body';
2 |
--------------------------------------------------------------------------------
/define-plugin/src/components/footer.js:
--------------------------------------------------------------------------------
1 | export default 'footer';
2 |
--------------------------------------------------------------------------------
/define-plugin/src/components/header.js:
--------------------------------------------------------------------------------
1 | export default 'header';
2 |
--------------------------------------------------------------------------------
/define-plugin/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import lodash from 'lodash';
4 |
5 | if (process.env.NODE_ENV === 'dev') {
6 | console.log('this will be removed on prod build')
7 | }
8 |
9 | ReactDOM.render(
10 | Hello World!,
11 | document.getElementById('app')
12 | );
13 |
--------------------------------------------------------------------------------
/define-plugin/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const webpack = require('webpack');
3 | /**
4 | * loaders list
5 | */
6 | const loaders = [
7 | {
8 | test: /\.jsx?$/,
9 | exclude: /node_modules/,
10 | loader: 'babel-loader',
11 | query: {
12 | presets: ['react', 'es2015', 'stage-0'],
13 | plugins: ['add-module-exports']
14 | }
15 | }
16 | ];
17 |
18 | /**
19 | * plugins list
20 | */
21 | const plugins = [
22 | new webpack.DefinePlugin({
23 | 'process.env': {
24 | 'NODE_ENV': '"production"'
25 | }
26 | })
27 | ];
28 |
29 | module.exports = {
30 | entry: {
31 | index: path.join(__dirname, 'src/index.js')
32 | },
33 | output: {
34 | path: path.join(__dirname, 'build'),
35 | filename: '[name].js'
36 | },
37 | module: {
38 | loaders: loaders,
39 | noParse: [
40 | /lodash/
41 | ]
42 | },
43 | plugins: plugins,
44 | };
45 |
--------------------------------------------------------------------------------
/dll-bundles/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 |
--------------------------------------------------------------------------------
/dll-bundles/README.md:
--------------------------------------------------------------------------------
1 | # DLL Bundles
2 |
--------------------------------------------------------------------------------
/dll-bundles/dist/bunld.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 | /******/ exports: {},
15 | /******/ id: moduleId,
16 | /******/ loaded: false
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.loaded = 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 | /******/ // __webpack_public_path__
37 | /******/ __webpack_require__.p = "";
38 |
39 | /******/ // Load entry module and return exports
40 | /******/ return __webpack_require__(0);
41 | /******/ })
42 | /************************************************************************/
43 | /******/ ([
44 | /* 0 */
45 | /***/ function(module, exports, __webpack_require__) {
46 |
47 | 'use strict';
48 |
49 | var _react = __webpack_require__(1);
50 |
51 | var _react2 = _interopRequireDefault(_react);
52 |
53 | var _reactDom = __webpack_require__(3);
54 |
55 | var _reactDom2 = _interopRequireDefault(_reactDom);
56 |
57 | var _lodash = __webpack_require__(4);
58 |
59 | var _lodash2 = _interopRequireDefault(_lodash);
60 |
61 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
62 |
63 | _reactDom2.default.render(_react2.default.createElement(
64 | 'div',
65 | null,
66 | _react2.default.createElement(
67 | 'span',
68 | null,
69 | 'Hello World'
70 | )
71 | ), document.getElementById('app'));
72 |
73 | /***/ },
74 | /* 1 */
75 | /***/ function(module, exports, __webpack_require__) {
76 |
77 | module.exports = (__webpack_require__(2))(1);
78 |
79 | /***/ },
80 | /* 2 */
81 | /***/ function(module, exports) {
82 |
83 | module.exports = vendor_dll;
84 |
85 | /***/ },
86 | /* 3 */
87 | /***/ function(module, exports, __webpack_require__) {
88 |
89 | module.exports = (__webpack_require__(2))(38);
90 |
91 | /***/ },
92 | /* 4 */
93 | /***/ function(module, exports, __webpack_require__) {
94 |
95 | module.exports = (__webpack_require__(2))(168);
96 |
97 | /***/ }
98 | /******/ ]);
--------------------------------------------------------------------------------
/dll-bundles/dll/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vendor_dll",
3 | "content": {
4 | "./node_modules/react/react.js": 1,
5 | "./node_modules/react/lib/React.js": 2,
6 | "./node_modules/webpack/node_modules/node-libs-browser/node_modules/process/browser.js": 3,
7 | "./node_modules/object-assign/index.js": 4,
8 | "./node_modules/react/lib/ReactChildren.js": 5,
9 | "./node_modules/react/lib/PooledClass.js": 6,
10 | "./node_modules/fbjs/lib/invariant.js": 7,
11 | "./node_modules/react/lib/ReactElement.js": 8,
12 | "./node_modules/react/lib/ReactCurrentOwner.js": 9,
13 | "./node_modules/fbjs/lib/warning.js": 10,
14 | "./node_modules/fbjs/lib/emptyFunction.js": 11,
15 | "./node_modules/react/lib/canDefineProperty.js": 12,
16 | "./node_modules/react/lib/traverseAllChildren.js": 13,
17 | "./node_modules/react/lib/getIteratorFn.js": 14,
18 | "./node_modules/react/lib/KeyEscapeUtils.js": 15,
19 | "./node_modules/react/lib/ReactComponent.js": 16,
20 | "./node_modules/react/lib/ReactNoopUpdateQueue.js": 17,
21 | "./node_modules/react/lib/ReactInstrumentation.js": 18,
22 | "./node_modules/react/lib/ReactDebugTool.js": 19,
23 | "./node_modules/fbjs/lib/ExecutionEnvironment.js": 20,
24 | "./node_modules/fbjs/lib/performanceNow.js": 21,
25 | "./node_modules/fbjs/lib/performance.js": 22,
26 | "./node_modules/react/lib/ReactInvalidSetStateWarningDevTool.js": 23,
27 | "./node_modules/react/lib/ReactNativeOperationHistoryDevtool.js": 24,
28 | "./node_modules/react/lib/ReactComponentTreeDevtool.js": 25,
29 | "./node_modules/fbjs/lib/emptyObject.js": 26,
30 | "./node_modules/react/lib/ReactClass.js": 27,
31 | "./node_modules/react/lib/ReactPropTypeLocations.js": 28,
32 | "./node_modules/fbjs/lib/keyMirror.js": 29,
33 | "./node_modules/react/lib/ReactPropTypeLocationNames.js": 30,
34 | "./node_modules/fbjs/lib/keyOf.js": 31,
35 | "./node_modules/react/lib/ReactDOMFactories.js": 32,
36 | "./node_modules/react/lib/ReactElementValidator.js": 33,
37 | "./node_modules/fbjs/lib/mapObject.js": 34,
38 | "./node_modules/react/lib/ReactPropTypes.js": 35,
39 | "./node_modules/react/lib/ReactVersion.js": 36,
40 | "./node_modules/react/lib/onlyChild.js": 37,
41 | "./node_modules/react-dom/index.js": 38,
42 | "./node_modules/react/lib/ReactDOM.js": 39,
43 | "./node_modules/react/lib/ReactDOMComponentTree.js": 40,
44 | "./node_modules/react/lib/DOMProperty.js": 41,
45 | "./node_modules/react/lib/ReactDOMComponentFlags.js": 42,
46 | "./node_modules/react/lib/ReactDefaultInjection.js": 43,
47 | "./node_modules/react/lib/BeforeInputEventPlugin.js": 44,
48 | "./node_modules/react/lib/EventConstants.js": 45,
49 | "./node_modules/react/lib/EventPropagators.js": 46,
50 | "./node_modules/react/lib/EventPluginHub.js": 47,
51 | "./node_modules/react/lib/EventPluginRegistry.js": 48,
52 | "./node_modules/react/lib/EventPluginUtils.js": 49,
53 | "./node_modules/react/lib/ReactErrorUtils.js": 50,
54 | "./node_modules/react/lib/accumulateInto.js": 51,
55 | "./node_modules/react/lib/forEachAccumulated.js": 52,
56 | "./node_modules/react/lib/FallbackCompositionState.js": 53,
57 | "./node_modules/react/lib/getTextContentAccessor.js": 54,
58 | "./node_modules/react/lib/SyntheticCompositionEvent.js": 55,
59 | "./node_modules/react/lib/SyntheticEvent.js": 56,
60 | "./node_modules/react/lib/SyntheticInputEvent.js": 57,
61 | "./node_modules/react/lib/ChangeEventPlugin.js": 58,
62 | "./node_modules/react/lib/ReactUpdates.js": 59,
63 | "./node_modules/react/lib/CallbackQueue.js": 60,
64 | "./node_modules/react/lib/ReactFeatureFlags.js": 61,
65 | "./node_modules/react/lib/ReactReconciler.js": 62,
66 | "./node_modules/react/lib/ReactRef.js": 63,
67 | "./node_modules/react/lib/ReactOwner.js": 64,
68 | "./node_modules/react/lib/Transaction.js": 65,
69 | "./node_modules/react/lib/getEventTarget.js": 66,
70 | "./node_modules/react/lib/isEventSupported.js": 67,
71 | "./node_modules/react/lib/isTextInputElement.js": 68,
72 | "./node_modules/react/lib/DefaultEventPluginOrder.js": 69,
73 | "./node_modules/react/lib/EnterLeaveEventPlugin.js": 70,
74 | "./node_modules/react/lib/SyntheticMouseEvent.js": 71,
75 | "./node_modules/react/lib/SyntheticUIEvent.js": 72,
76 | "./node_modules/react/lib/ViewportMetrics.js": 73,
77 | "./node_modules/react/lib/getEventModifierState.js": 74,
78 | "./node_modules/react/lib/HTMLDOMPropertyConfig.js": 75,
79 | "./node_modules/react/lib/ReactComponentBrowserEnvironment.js": 76,
80 | "./node_modules/react/lib/DOMChildrenOperations.js": 77,
81 | "./node_modules/react/lib/DOMLazyTree.js": 78,
82 | "./node_modules/react/lib/DOMNamespaces.js": 79,
83 | "./node_modules/react/lib/createMicrosoftUnsafeLocalFunction.js": 80,
84 | "./node_modules/react/lib/setTextContent.js": 81,
85 | "./node_modules/react/lib/escapeTextContentForBrowser.js": 82,
86 | "./node_modules/react/lib/setInnerHTML.js": 83,
87 | "./node_modules/react/lib/Danger.js": 84,
88 | "./node_modules/fbjs/lib/createNodesFromMarkup.js": 85,
89 | "./node_modules/fbjs/lib/createArrayFromMixed.js": 86,
90 | "./node_modules/fbjs/lib/getMarkupWrap.js": 87,
91 | "./node_modules/react/lib/ReactMultiChildUpdateTypes.js": 88,
92 | "./node_modules/react/lib/ReactDOMIDOperations.js": 89,
93 | "./node_modules/react/lib/ReactDOMComponent.js": 90,
94 | "./node_modules/react/lib/AutoFocusUtils.js": 91,
95 | "./node_modules/fbjs/lib/focusNode.js": 92,
96 | "./node_modules/react/lib/CSSPropertyOperations.js": 93,
97 | "./node_modules/react/lib/CSSProperty.js": 94,
98 | "./node_modules/fbjs/lib/camelizeStyleName.js": 95,
99 | "./node_modules/fbjs/lib/camelize.js": 96,
100 | "./node_modules/react/lib/dangerousStyleValue.js": 97,
101 | "./node_modules/fbjs/lib/hyphenateStyleName.js": 98,
102 | "./node_modules/fbjs/lib/hyphenate.js": 99,
103 | "./node_modules/fbjs/lib/memoizeStringOnly.js": 100,
104 | "./node_modules/react/lib/DOMPropertyOperations.js": 101,
105 | "./node_modules/react/lib/ReactDOMInstrumentation.js": 102,
106 | "./node_modules/react/lib/ReactDOMDebugTool.js": 103,
107 | "./node_modules/react/lib/ReactDOMUnknownPropertyDevtool.js": 104,
108 | "./node_modules/react/lib/quoteAttributeValueForBrowser.js": 105,
109 | "./node_modules/react/lib/ReactBrowserEventEmitter.js": 106,
110 | "./node_modules/react/lib/ReactEventEmitterMixin.js": 107,
111 | "./node_modules/react/lib/getVendorPrefixedEventName.js": 108,
112 | "./node_modules/react/lib/ReactDOMButton.js": 109,
113 | "./node_modules/react/lib/DisabledInputUtils.js": 110,
114 | "./node_modules/react/lib/ReactDOMInput.js": 111,
115 | "./node_modules/react/lib/LinkedValueUtils.js": 112,
116 | "./node_modules/react/lib/ReactDOMOption.js": 113,
117 | "./node_modules/react/lib/ReactDOMSelect.js": 114,
118 | "./node_modules/react/lib/ReactDOMTextarea.js": 115,
119 | "./node_modules/react/lib/ReactMultiChild.js": 116,
120 | "./node_modules/react/lib/ReactComponentEnvironment.js": 117,
121 | "./node_modules/react/lib/ReactChildReconciler.js": 118,
122 | "./node_modules/react/lib/instantiateReactComponent.js": 119,
123 | "./node_modules/react/lib/ReactCompositeComponent.js": 120,
124 | "./node_modules/react/lib/ReactInstanceMap.js": 121,
125 | "./node_modules/react/lib/ReactNodeTypes.js": 122,
126 | "./node_modules/react/lib/ReactUpdateQueue.js": 123,
127 | "./node_modules/react/lib/shouldUpdateReactComponent.js": 124,
128 | "./node_modules/react/lib/ReactEmptyComponent.js": 125,
129 | "./node_modules/react/lib/ReactNativeComponent.js": 126,
130 | "./node_modules/react/lib/flattenChildren.js": 127,
131 | "./node_modules/react/lib/ReactServerRenderingTransaction.js": 128,
132 | "./node_modules/fbjs/lib/shallowEqual.js": 129,
133 | "./node_modules/react/lib/validateDOMNesting.js": 130,
134 | "./node_modules/react/lib/ReactDOMEmptyComponent.js": 131,
135 | "./node_modules/react/lib/ReactDOMTreeTraversal.js": 132,
136 | "./node_modules/react/lib/ReactDOMTextComponent.js": 133,
137 | "./node_modules/react/lib/ReactDefaultBatchingStrategy.js": 134,
138 | "./node_modules/react/lib/ReactEventListener.js": 135,
139 | "./node_modules/fbjs/lib/EventListener.js": 136,
140 | "./node_modules/fbjs/lib/getUnboundedScrollPosition.js": 137,
141 | "./node_modules/react/lib/ReactInjection.js": 138,
142 | "./node_modules/react/lib/ReactReconcileTransaction.js": 139,
143 | "./node_modules/react/lib/ReactInputSelection.js": 140,
144 | "./node_modules/react/lib/ReactDOMSelection.js": 141,
145 | "./node_modules/react/lib/getNodeForCharacterOffset.js": 142,
146 | "./node_modules/fbjs/lib/containsNode.js": 143,
147 | "./node_modules/fbjs/lib/isTextNode.js": 144,
148 | "./node_modules/fbjs/lib/isNode.js": 145,
149 | "./node_modules/fbjs/lib/getActiveElement.js": 146,
150 | "./node_modules/react/lib/SVGDOMPropertyConfig.js": 147,
151 | "./node_modules/react/lib/SelectEventPlugin.js": 148,
152 | "./node_modules/react/lib/SimpleEventPlugin.js": 149,
153 | "./node_modules/react/lib/SyntheticAnimationEvent.js": 150,
154 | "./node_modules/react/lib/SyntheticClipboardEvent.js": 151,
155 | "./node_modules/react/lib/SyntheticFocusEvent.js": 152,
156 | "./node_modules/react/lib/SyntheticKeyboardEvent.js": 153,
157 | "./node_modules/react/lib/getEventCharCode.js": 154,
158 | "./node_modules/react/lib/getEventKey.js": 155,
159 | "./node_modules/react/lib/SyntheticDragEvent.js": 156,
160 | "./node_modules/react/lib/SyntheticTouchEvent.js": 157,
161 | "./node_modules/react/lib/SyntheticTransitionEvent.js": 158,
162 | "./node_modules/react/lib/SyntheticWheelEvent.js": 159,
163 | "./node_modules/react/lib/ReactMount.js": 160,
164 | "./node_modules/react/lib/ReactDOMContainerInfo.js": 161,
165 | "./node_modules/react/lib/ReactDOMFeatureFlags.js": 162,
166 | "./node_modules/react/lib/ReactMarkupChecksum.js": 163,
167 | "./node_modules/react/lib/adler32.js": 164,
168 | "./node_modules/react/lib/findDOMNode.js": 165,
169 | "./node_modules/react/lib/getNativeComponentFromComposite.js": 166,
170 | "./node_modules/react/lib/renderSubtreeIntoContainer.js": 167,
171 | "./node_modules/lodash/lodash.js": 168,
172 | "./node_modules/webpack/buildin/module.js": 169
173 | }
174 | }
--------------------------------------------------------------------------------
/dll-bundles/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | DLL Bundles Example
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/dll-bundles/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import _ from 'lodash';
4 |
5 | ReactDOM.render(
6 |
7 | Hello World
8 |
,
9 | document.getElementById('app')
10 | );
11 |
--------------------------------------------------------------------------------
/dll-bundles/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "webpack-dll-example",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "dist/bunld.js",
6 | "scripts": {
7 | "clean": "rimraf ./dist ./dll npm-debug.log",
8 | "dll": "MAKE_DLL=1 webpack --config webpack.config.prod.js",
9 | "prebuild": "npm run clean && npm run dll",
10 | "build": "webpack --config webpack.config.prod.js"
11 | },
12 | "author": "",
13 | "license": "MIT",
14 | "devDependencies": {
15 | "babel-loader": "^6.2.4",
16 | "babel-preset-es2015": "^6.9.0",
17 | "babel-preset-react": "^6.5.0",
18 | "rimraf": "^2.5.2",
19 | "webpack": "~1.13.0"
20 | },
21 | "dependencies": {
22 | "jquery": "^3.0.0",
23 | "lodash": "^4.13.1",
24 | "react": "^15.1.0",
25 | "react-dom": "^15.1.0"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/dll-bundles/webpack.config.prod.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var webpack = require('webpack');
3 |
4 | var exp = {};
5 | var loaders = [
6 | {
7 | test: /\.jsx?$/,
8 | exclude: /node_modules/,
9 | loader: 'babel',
10 | query: {
11 | presets: ['es2015', 'react'],
12 | cacheDirectory: true
13 | }
14 | }
15 | ];
16 |
17 | if (process.env.MAKE_DLL) {
18 | exp = {
19 | entry: {
20 | vendor: [
21 | 'react',
22 | 'react-dom',
23 | 'lodash'
24 | ]
25 | },
26 | output: {
27 | path: path.join(__dirname, 'dll'),
28 | filename: '[name].js',
29 | library: '[name]_dll'
30 | },
31 | plugins: [
32 | new webpack.DllPlugin({
33 | path: path.join(__dirname, 'dll', 'manifest.json'),
34 | name: '[name]_dll'
35 | })
36 | ],
37 | module: {
38 | loaders: loaders
39 | }
40 | };
41 | } else {
42 | exp = {
43 | entry: './index.js',
44 | output: {
45 | path: path.join(__dirname, 'dist'),
46 | filename: 'bunld.js',
47 | },
48 | plugins: [
49 | new webpack.DllReferencePlugin({
50 | context: '.',
51 | manifest: require('./dll/manifest.json')
52 | })
53 | ],
54 | module: {
55 | loaders: loaders
56 | }
57 | };
58 | }
59 |
60 | module.exports = exp;
61 |
--------------------------------------------------------------------------------
/externals/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 |
--------------------------------------------------------------------------------
/externals/README.md:
--------------------------------------------------------------------------------
1 | # Externals
2 |
--------------------------------------------------------------------------------
/externals/build/index.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 | /******/ exports: {},
15 | /******/ id: moduleId,
16 | /******/ loaded: false
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.loaded = 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 | /******/ // __webpack_public_path__
37 | /******/ __webpack_require__.p = "";
38 |
39 | /******/ // Load entry module and return exports
40 | /******/ return __webpack_require__(0);
41 | /******/ })
42 | /************************************************************************/
43 | /******/ ([
44 | /* 0 */
45 | /***/ function(module, exports, __webpack_require__) {
46 |
47 | 'use strict';
48 |
49 | var _react = __webpack_require__(1);
50 |
51 | var _react2 = _interopRequireDefault(_react);
52 |
53 | var _reactDom = __webpack_require__(2);
54 |
55 | var _reactDom2 = _interopRequireDefault(_reactDom);
56 |
57 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
58 |
59 | _reactDom2.default.render(_react2.default.createElement(
60 | 'span',
61 | null,
62 | 'Hello World!'
63 | ), document.getElementById('app'));
64 |
65 | /***/ },
66 | /* 1 */
67 | /***/ function(module, exports) {
68 |
69 | module.exports = React;
70 |
71 | /***/ },
72 | /* 2 */
73 | /***/ function(module, exports) {
74 |
75 | module.exports = ReactDOM;
76 |
77 | /***/ }
78 | /******/ ]);
--------------------------------------------------------------------------------
/externals/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Externals Example
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/externals/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "webpack-base",
3 | "version": "0.0.1",
4 | "description": "a webpack base repo",
5 | "main": "build/index.js",
6 | "scripts": {
7 | "clean": "rimraf ./build",
8 | "prebuild": "npm run clean",
9 | "build": "webpack --progress --profile"
10 | },
11 | "repository": {
12 | "type": "git",
13 | "url": "git+https://github.com/FrendEr/webpack-base.git"
14 | },
15 | "author": "FrendEr",
16 | "license": "MIT",
17 | "bugs": {
18 | "url": "https://github.com/FrendEr/webpack-base/issues"
19 | },
20 | "homepage": "https://github.com/FrendEr/webpack-base#readme",
21 | "devDependencies": {
22 | "babel-loader": "^6.2.4",
23 | "babel-plugin-add-module-exports": "^0.2.1",
24 | "babel-preset-es2015": "^6.9.0",
25 | "babel-preset-react": "^6.5.0",
26 | "babel-preset-stage-0": "^6.5.0",
27 | "extract-text-webpack-plugin": "^1.0.1",
28 | "rimraf": "^2.5.2",
29 | "webpack": "^1.13.1"
30 | },
31 | "dependencies": {
32 | "react": "^15.1.0",
33 | "react-dom": "^15.1.0"
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/externals/src/components/body.js:
--------------------------------------------------------------------------------
1 | export default 'body';
2 |
--------------------------------------------------------------------------------
/externals/src/components/footer.js:
--------------------------------------------------------------------------------
1 | export default 'footer';
2 |
--------------------------------------------------------------------------------
/externals/src/components/header.js:
--------------------------------------------------------------------------------
1 | export default 'header';
2 |
--------------------------------------------------------------------------------
/externals/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | ReactDOM.render(
5 | Hello World!,
6 | document.getElementById('app')
7 | );
8 |
--------------------------------------------------------------------------------
/externals/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 |
3 | /**
4 | * loaders list
5 | */
6 | const loaders = [
7 | {
8 | test: /\.jsx?$/,
9 | exclude: /node_modules/,
10 | loader: 'babel-loader',
11 | query: {
12 | presets: ['react', 'es2015', 'stage-0'],
13 | plugins: ['add-module-exports']
14 | }
15 | }
16 | ];
17 |
18 | /**
19 | * plugins list
20 | */
21 | const plugins = [];
22 |
23 | module.exports = {
24 | entry: {
25 | index: path.join(__dirname, 'src/index.js')
26 | },
27 | output: {
28 | path: path.join(__dirname, 'build'),
29 | filename: '[name].js'
30 | },
31 | module: {
32 | loaders: loaders
33 | },
34 | plugins: plugins,
35 | externals: {
36 | 'react': 'React',
37 | 'react-dom': 'ReactDOM'
38 | }
39 | };
40 |
--------------------------------------------------------------------------------
/happypack/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 |
--------------------------------------------------------------------------------
/happypack/.happypack/cache--1.json:
--------------------------------------------------------------------------------
1 | {"context":{"loaders":[{"path":"/Users/alibaba/Documents/kaian/github-repo/webpack-optimize-example/happypack/node_modules/babel-loader/index.js","query":"?presets[]=es2015,presets[]=react,presets[]=stage-0"}],"external":{}},"mtimes":{"/Users/alibaba/Documents/kaian/github-repo/webpack-optimize-example/happypack/src/index.js":{"mtime":1466092979000,"compiledPath":"/Users/alibaba/Documents/kaian/github-repo/webpack-optimize-example/happypack/.happypack/s--605522759"}}}
--------------------------------------------------------------------------------
/happypack/.happypack/s--605522759:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var _react = require('react');
4 |
5 | var _react2 = _interopRequireDefault(_react);
6 |
7 | var _reactDom = require('react-dom');
8 |
9 | var _reactDom2 = _interopRequireDefault(_reactDom);
10 |
11 | var _lodash = require('lodash');
12 |
13 | var _lodash2 = _interopRequireDefault(_lodash);
14 |
15 | var _classnames = require('classnames');
16 |
17 | var _classnames2 = _interopRequireDefault(_classnames);
18 |
19 | var _rcAnimate = require('rc-animate');
20 |
21 | var _rcAnimate2 = _interopRequireDefault(_rcAnimate);
22 |
23 | var _rcSwipeout = require('rc-swipeout');
24 |
25 | var _rcSwipeout2 = _interopRequireDefault(_rcSwipeout);
26 |
27 | var _rcTable = require('rc-table');
28 |
29 | var _rcTable2 = _interopRequireDefault(_rcTable);
30 |
31 | var _rcCalendar = require('rc-calendar');
32 |
33 | var _rcCalendar2 = _interopRequireDefault(_rcCalendar);
34 |
35 | var _rcCheckbox = require('rc-checkbox');
36 |
37 | var _rcCheckbox2 = _interopRequireDefault(_rcCheckbox);
38 |
39 | var _rcTree = require('rc-tree');
40 |
41 | var _rcTree2 = _interopRequireDefault(_rcTree);
42 |
43 | var _rcUpload = require('rc-upload');
44 |
45 | var _rcUpload2 = _interopRequireDefault(_rcUpload);
46 |
47 | var _rcSelect = require('rc-select');
48 |
49 | var _rcSelect2 = _interopRequireDefault(_rcSelect);
50 |
51 | var _rcTooltip = require('rc-tooltip');
52 |
53 | var _rcTooltip2 = _interopRequireDefault(_rcTooltip);
54 |
55 | var _rcForm = require('rc-form');
56 |
57 | var _rcForm2 = _interopRequireDefault(_rcForm);
58 |
59 | var _rcDialog = require('rc-dialog');
60 |
61 | var _rcDialog2 = _interopRequireDefault(_rcDialog);
62 |
63 | var _rcSlider = require('rc-slider');
64 |
65 | var _rcSlider2 = _interopRequireDefault(_rcSlider);
66 |
67 | var _rcProgress = require('rc-progress');
68 |
69 | var _rcProgress2 = _interopRequireDefault(_rcProgress);
70 |
71 | var _rcRate = require('rc-rate');
72 |
73 | var _rcRate2 = _interopRequireDefault(_rcRate);
74 |
75 | var _rcTabs = require('rc-tabs');
76 |
77 | var _rcTabs2 = _interopRequireDefault(_rcTabs);
78 |
79 | var _rcMenu = require('rc-menu');
80 |
81 | var _rcMenu2 = _interopRequireDefault(_rcMenu);
82 |
83 | var _rcSteps = require('rc-steps');
84 |
85 | var _rcSteps2 = _interopRequireDefault(_rcSteps);
86 |
87 | var _rcDrawer = require('rc-drawer');
88 |
89 | var _rcDrawer2 = _interopRequireDefault(_rcDrawer);
90 |
91 | var _rcDropdown = require('rc-dropdown');
92 |
93 | var _rcDropdown2 = _interopRequireDefault(_rcDropdown);
94 |
95 | var _rcCollapse = require('rc-collapse');
96 |
97 | var _rcCollapse2 = _interopRequireDefault(_rcCollapse);
98 |
99 | var _rcPagination = require('rc-pagination');
100 |
101 | var _rcPagination2 = _interopRequireDefault(_rcPagination);
102 |
103 | var _rcNotification = require('rc-notification');
104 |
105 | var _rcNotification2 = _interopRequireDefault(_rcNotification);
106 |
107 | var _rcTimePicker = require('rc-time-picker');
108 |
109 | var _rcTimePicker2 = _interopRequireDefault(_rcTimePicker);
110 |
111 | var _rcPager = require('rc-pager');
112 |
113 | var _rcPager2 = _interopRequireDefault(_rcPager);
114 |
115 | var _rcRadio = require('rc-radio');
116 |
117 | var _rcRadio2 = _interopRequireDefault(_rcRadio);
118 |
119 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
--------------------------------------------------------------------------------
/happypack/.happypack/s--605522759.map:
--------------------------------------------------------------------------------
1 | null
--------------------------------------------------------------------------------
/happypack/README.md:
--------------------------------------------------------------------------------
1 | # HappyPack
2 |
--------------------------------------------------------------------------------
/happypack/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "webpack-base",
3 | "version": "0.0.1",
4 | "description": "a webpack base repo",
5 | "main": "build/index.js",
6 | "scripts": {
7 | "clean": "rimraf ./build",
8 | "prebuild": "npm run clean",
9 | "build": "webpack --progress --profile"
10 | },
11 | "repository": {
12 | "type": "git",
13 | "url": "git+https://github.com/FrendEr/webpack-base.git"
14 | },
15 | "author": "FrendEr",
16 | "license": "MIT",
17 | "bugs": {
18 | "url": "https://github.com/FrendEr/webpack-base/issues"
19 | },
20 | "homepage": "https://github.com/FrendEr/webpack-base#readme",
21 | "devDependencies": {
22 | "babel-loader": "^6.2.4",
23 | "babel-plugin-add-module-exports": "^0.2.1",
24 | "babel-preset-es2015": "^6.9.0",
25 | "babel-preset-react": "^6.5.0",
26 | "babel-preset-stage-0": "^6.5.0",
27 | "extract-text-webpack-plugin": "^1.0.1",
28 | "happypack": "^2.1.1",
29 | "rimraf": "^2.5.2",
30 | "webpack": "^1.13.1"
31 | },
32 | "dependencies": {
33 | "classnames": "^2.2.5",
34 | "lodash": "^4.13.1",
35 | "rc-animate": "^2.1.0",
36 | "rc-calendar": "^5.5.6",
37 | "rc-checkbox": "^1.4.0",
38 | "rc-collapse": "^1.6.3",
39 | "rc-dialog": "^6.1.0",
40 | "rc-drawer": "^0.4.0",
41 | "rc-dropdown": "^1.4.8",
42 | "rc-dropzone": "^1.1.3",
43 | "rc-form": "^0.17.1",
44 | "rc-menu": "^4.12.3",
45 | "rc-notification": "^1.3.4",
46 | "rc-pager": "^2.2.0",
47 | "rc-pagination": "^1.5.3",
48 | "rc-progress": "^1.0.4",
49 | "rc-radio": "^2.0.0",
50 | "rc-rate": "^1.1.2",
51 | "rc-select": "^6.4.6",
52 | "rc-slider": "^3.7.1",
53 | "rc-spider": "0.0.8",
54 | "rc-steps": "^2.1.3",
55 | "rc-swipeout": "^1.0.1",
56 | "rc-table": "^4.2.0",
57 | "rc-tabs": "^5.9.2",
58 | "rc-time-picker": "^1.1.4",
59 | "rc-tooltip": "^3.3.5",
60 | "rc-tree": "^1.3.2",
61 | "rc-upload": "^1.13.2",
62 | "react": "^15.1.0",
63 | "react-dom": "^15.1.0",
64 | "underscore": "^1.8.3"
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/happypack/src/components/body.js:
--------------------------------------------------------------------------------
1 | export default 'body';
2 |
--------------------------------------------------------------------------------
/happypack/src/components/footer.js:
--------------------------------------------------------------------------------
1 | export default 'footer';
2 |
--------------------------------------------------------------------------------
/happypack/src/components/header.js:
--------------------------------------------------------------------------------
1 | export default 'header';
2 |
--------------------------------------------------------------------------------
/happypack/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import lodash from 'lodash';
4 | import classnames from 'classnames';
5 |
6 | import animate from 'rc-animate';
7 | import swipeout from 'rc-swipeout';
8 | import table from 'rc-table';
9 | import calendar from 'rc-calendar';
10 | import checkbox from 'rc-checkbox';
11 | import tree from 'rc-tree';
12 | import upload from 'rc-upload';
13 | import select from 'rc-select';
14 | import tooltip from 'rc-tooltip';
15 |
16 | import form from 'rc-form';
17 | import dialog from 'rc-dialog';
18 | import slider from 'rc-slider';
19 | import progress from 'rc-progress';
20 | import rate from 'rc-rate';
21 | import tabs from 'rc-tabs';
22 | import menu from 'rc-menu';
23 | import steps from 'rc-steps';
24 | import drawer from 'rc-drawer';
25 |
26 | import dropdown from 'rc-dropdown';
27 | import collapse from 'rc-collapse';
28 | import pagination from 'rc-pagination';
29 | import notification from 'rc-notification';
30 | import timePicker from 'rc-time-picker';
31 | import pager from 'rc-pager';
32 | import radio from 'rc-radio';
33 |
--------------------------------------------------------------------------------
/happypack/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const webpack = require('webpack');
3 | const HappyPack = require('happypack');
4 |
5 | /**
6 | * loaders list
7 | */
8 | const loaders = [
9 | {
10 | test: /\.jsx?$/,
11 | exclude: /node_modules/,
12 | loader: 'happypack/loader'
13 | }
14 | ];
15 |
16 | /**
17 | * plugins list
18 | */
19 | const plugins = [
20 | new webpack.DefinePlugin({
21 | 'process.env': {
22 | 'NODE_ENV': JSON.stringify('production')
23 | }
24 | }),
25 | new webpack.optimize.DedupePlugin(),
26 | new webpack.optimize.UglifyJsPlugin({
27 | sourceMap: false,
28 | minimize: true,
29 | mangle: {
30 | except: ['functor']
31 | },
32 | compress: {
33 | drop_debugger: true,
34 | warnings: false,
35 | drop_console: true
36 | }
37 | }),
38 | new HappyPack({
39 | loaders: ['babel?presets[]=es2015,presets[]=react,presets[]=stage-0']
40 | })
41 | ];
42 |
43 | module.exports = [{
44 | entry: {
45 | index: path.join(__dirname, 'src/index.js')
46 | },
47 | output: {
48 | path: path.join(__dirname, 'build'),
49 | filename: '[name].js'
50 | },
51 | module: {
52 | loaders: loaders
53 | },
54 | plugins: plugins
55 | }];
56 |
--------------------------------------------------------------------------------
/no-parse/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 |
--------------------------------------------------------------------------------
/no-parse/README.md:
--------------------------------------------------------------------------------
1 | # NoParse
2 |
--------------------------------------------------------------------------------
/no-parse/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | NoParse Example
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/no-parse/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "webpack-base",
3 | "version": "0.0.1",
4 | "description": "a webpack base repo",
5 | "main": "build/index.js",
6 | "scripts": {
7 | "clean": "rimraf ./build",
8 | "prebuild": "npm run clean",
9 | "build": "webpack --progress --profile"
10 | },
11 | "repository": {
12 | "type": "git",
13 | "url": "git+https://github.com/FrendEr/webpack-base.git"
14 | },
15 | "author": "FrendEr",
16 | "license": "MIT",
17 | "bugs": {
18 | "url": "https://github.com/FrendEr/webpack-base/issues"
19 | },
20 | "homepage": "https://github.com/FrendEr/webpack-base#readme",
21 | "devDependencies": {
22 | "babel-loader": "^6.2.4",
23 | "babel-plugin-add-module-exports": "^0.2.1",
24 | "babel-preset-es2015": "^6.9.0",
25 | "babel-preset-react": "^6.5.0",
26 | "babel-preset-stage-0": "^6.5.0",
27 | "extract-text-webpack-plugin": "^1.0.1",
28 | "rimraf": "^2.5.2",
29 | "webpack": "^1.13.1"
30 | },
31 | "dependencies": {
32 | "lodash": "^4.13.1",
33 | "react": "^15.1.0",
34 | "react-dom": "^15.1.0"
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/no-parse/src/components/body.js:
--------------------------------------------------------------------------------
1 | export default 'body';
2 |
--------------------------------------------------------------------------------
/no-parse/src/components/footer.js:
--------------------------------------------------------------------------------
1 | export default 'footer';
2 |
--------------------------------------------------------------------------------
/no-parse/src/components/header.js:
--------------------------------------------------------------------------------
1 | export default 'header';
2 |
--------------------------------------------------------------------------------
/no-parse/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import lodash from 'lodash';
4 |
5 | ReactDOM.render(
6 | Hello World!,
7 | document.getElementById('app')
8 | );
9 |
--------------------------------------------------------------------------------
/no-parse/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 |
3 | /**
4 | * loaders list
5 | */
6 | const loaders = [
7 | {
8 | test: /\.jsx?$/,
9 | exclude: /node_modules/,
10 | loader: 'babel-loader',
11 | query: {
12 | presets: ['react', 'es2015', 'stage-0'],
13 | plugins: ['add-module-exports']
14 | }
15 | }
16 | ];
17 |
18 | /**
19 | * plugins list
20 | */
21 | const plugins = [];
22 |
23 | module.exports = {
24 | entry: {
25 | index: path.join(__dirname, 'src/index.js')
26 | },
27 | output: {
28 | path: path.join(__dirname, 'build'),
29 | filename: '[name].js'
30 | },
31 | module: {
32 | loaders: loaders,
33 | noParse: [
34 | /lodash/
35 | ]
36 | },
37 | plugins: plugins,
38 | externals: {
39 | 'react': 'React',
40 | 'react-dom': 'ReactDOM'
41 | }
42 | };
43 |
--------------------------------------------------------------------------------
/parallel-webpack/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 |
--------------------------------------------------------------------------------
/parallel-webpack/README.md:
--------------------------------------------------------------------------------
1 | # Parallel-Webpack
2 |
--------------------------------------------------------------------------------
/parallel-webpack/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "webpack-base",
3 | "version": "0.0.1",
4 | "description": "a webpack base repo",
5 | "main": "build/index.js",
6 | "scripts": {
7 | "clean": "rimraf ./build",
8 | "prebuild": "npm run clean",
9 | "build": "webpack --progress --profile",
10 | "parallel-build": "parallel-webpack --progress --profile"
11 | },
12 | "repository": {
13 | "type": "git",
14 | "url": "git+https://github.com/FrendEr/webpack-base.git"
15 | },
16 | "author": "FrendEr",
17 | "license": "MIT",
18 | "bugs": {
19 | "url": "https://github.com/FrendEr/webpack-base/issues"
20 | },
21 | "homepage": "https://github.com/FrendEr/webpack-base#readme",
22 | "devDependencies": {
23 | "babel-loader": "^6.2.4",
24 | "babel-plugin-add-module-exports": "^0.2.1",
25 | "babel-preset-es2015": "^6.9.0",
26 | "babel-preset-react": "^6.5.0",
27 | "babel-preset-stage-0": "^6.5.0",
28 | "extract-text-webpack-plugin": "^1.0.1",
29 | "parallel-webpack": "^1.5.0",
30 | "rimraf": "^2.5.2",
31 | "webpack": "^1.13.1"
32 | },
33 | "dependencies": {
34 | "lodash": "^4.13.1",
35 | "react": "^15.1.0",
36 | "react-dom": "^15.1.0"
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/parallel-webpack/src/components/body.js:
--------------------------------------------------------------------------------
1 | module.exports = 'body';
2 |
--------------------------------------------------------------------------------
/parallel-webpack/src/components/footer.js:
--------------------------------------------------------------------------------
1 | module.exports = 'footer';
2 |
--------------------------------------------------------------------------------
/parallel-webpack/src/components/header.js:
--------------------------------------------------------------------------------
1 | module.exports = 'header';
2 |
--------------------------------------------------------------------------------
/parallel-webpack/src/container/home.js:
--------------------------------------------------------------------------------
1 | import lodash from 'lodash';
2 | import React from 'react';
3 | import ReactDOM from 'react-dom';
4 |
--------------------------------------------------------------------------------
/parallel-webpack/src/container/item.js:
--------------------------------------------------------------------------------
1 | import lodash from 'lodash';
2 | import React from 'react';
3 | import ReactDOM from 'react-dom';
4 |
--------------------------------------------------------------------------------
/parallel-webpack/src/container/list.js:
--------------------------------------------------------------------------------
1 | import lodash from 'lodash';
2 | import React from 'react';
3 | import ReactDOM from 'react-dom';
4 |
--------------------------------------------------------------------------------
/parallel-webpack/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const webpack = require('webpack');
3 |
4 | /**
5 | * loaders list
6 | */
7 | const loaders = [
8 | {
9 | test: /\.jsx?$/,
10 | exclude: /node_modules/,
11 | loader: 'babel',
12 | query: {
13 | presets: ['react', 'es2015', 'stage-0']
14 | }
15 | }
16 | ];
17 |
18 | /**
19 | * plugins list
20 | */
21 | const plugins = [
22 | new webpack.DefinePlugin({
23 | 'process.env': {
24 | 'NODE_ENV': JSON.stringify('production')
25 | }
26 | }),
27 | new webpack.optimize.DedupePlugin(),
28 | new webpack.optimize.UglifyJsPlugin({
29 | sourceMap: false,
30 | minimize: true,
31 | mangle: {
32 | except: ['functor']
33 | },
34 | compress: {
35 | drop_debugger: true,
36 | warnings: false,
37 | drop_console: true
38 | }
39 | })
40 | ];
41 |
42 | module.exports = [{
43 | entry: {
44 | home: path.join(__dirname, 'src/container/home.js')
45 | },
46 | output: {
47 | path: path.join(__dirname, 'build'),
48 | filename: '[name].js'
49 | },
50 | module: {
51 | loaders: loaders
52 | },
53 | plugins: plugins
54 | }, {
55 | entry: {
56 | list: path.join(__dirname, 'src/container/list.js')
57 | },
58 | output: {
59 | path: path.join(__dirname, 'build'),
60 | filename: '[name].js'
61 | },
62 | module: {
63 | loaders: loaders
64 | },
65 | plugins: plugins
66 | }, {
67 | entry: {
68 | item: path.join(__dirname, 'src/container/item.js')
69 | },
70 | output: {
71 | path: path.join(__dirname, 'build'),
72 | filename: '[name].js'
73 | },
74 | module: {
75 | loaders: loaders
76 | },
77 | plugins: plugins
78 | }];
79 |
--------------------------------------------------------------------------------
/prefetch-plugin/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 |
--------------------------------------------------------------------------------
/prefetch-plugin/README.md:
--------------------------------------------------------------------------------
1 | # PrefetchPlugin
2 |
3 | Use `webpack.PrefetchPlugin` for `Long module build chains`. Use [webpack/analyse](http://webpack.github.io/analyse) can help you to find out more information about your builds.
4 |
--------------------------------------------------------------------------------
/prefetch-plugin/build/index.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 | /******/ exports: {},
15 | /******/ id: moduleId,
16 | /******/ loaded: false
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.loaded = 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 | /******/ // __webpack_public_path__
37 | /******/ __webpack_require__.p = "";
38 |
39 | /******/ // Load entry module and return exports
40 | /******/ return __webpack_require__(0);
41 | /******/ })
42 | /************************************************************************/
43 | /******/ ([
44 | /* 0 */
45 | /***/ function(module, exports, __webpack_require__) {
46 |
47 | 'use strict';
48 |
49 | var _app = __webpack_require__(1);
50 |
51 | var _app2 = _interopRequireDefault(_app);
52 |
53 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
54 |
55 | /***/ },
56 | /* 1 */
57 | /***/ function(module, exports, __webpack_require__) {
58 |
59 | 'use strict';
60 |
61 | Object.defineProperty(exports, "__esModule", {
62 | value: true
63 | });
64 |
65 | var _header = __webpack_require__(2);
66 |
67 | var _header2 = _interopRequireDefault(_header);
68 |
69 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
70 |
71 | exports.default = 'app';
72 | module.exports = exports['default'];
73 |
74 | /***/ },
75 | /* 2 */
76 | /***/ function(module, exports, __webpack_require__) {
77 |
78 | 'use strict';
79 |
80 | Object.defineProperty(exports, "__esModule", {
81 | value: true
82 | });
83 |
84 | var _nav = __webpack_require__(3);
85 |
86 | var _nav2 = _interopRequireDefault(_nav);
87 |
88 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
89 |
90 | exports.default = 'header';
91 | module.exports = exports['default'];
92 |
93 | /***/ },
94 | /* 3 */
95 | /***/ function(module, exports) {
96 |
97 | 'use strict';
98 |
99 | Object.defineProperty(exports, "__esModule", {
100 | value: true
101 | });
102 | exports.default = 'nav';
103 | module.exports = exports['default'];
104 |
105 | /***/ }
106 | /******/ ]);
--------------------------------------------------------------------------------
/prefetch-plugin/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "webpack-base",
3 | "version": "0.0.1",
4 | "description": "a webpack base repo",
5 | "main": "build/index.js",
6 | "scripts": {
7 | "clean": "rimraf ./build stat.json",
8 | "prebuild": "npm run clean",
9 | "build": "webpack --progress --profile --json > stat.json"
10 | },
11 | "repository": {
12 | "type": "git",
13 | "url": "git+https://github.com/FrendEr/webpack-startkit.git"
14 | },
15 | "author": "FrendEr",
16 | "license": "MIT",
17 | "bugs": {
18 | "url": "https://github.com/FrendEr/webpack-startkit/issues"
19 | },
20 | "homepage": "https://github.com/FrendEr/webpack-startkit#readme",
21 | "devDependencies": {
22 | "babel-loader": "^6.2.4",
23 | "babel-plugin-add-module-exports": "^0.2.1",
24 | "babel-preset-es2015": "^6.9.0",
25 | "babel-preset-react": "^6.5.0",
26 | "babel-preset-stage-0": "^6.5.0",
27 | "extract-text-webpack-plugin": "^1.0.1",
28 | "rimraf": "^2.5.2",
29 | "webpack": "^1.13.1"
30 | },
31 | "dependencies": {
32 | "lodash": "^4.13.1",
33 | "react": "^15.1.0",
34 | "react-dom": "^15.1.0"
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/prefetch-plugin/src/components/app.js:
--------------------------------------------------------------------------------
1 | import Header from './header';
2 |
3 | export default 'app';
4 |
--------------------------------------------------------------------------------
/prefetch-plugin/src/components/header.js:
--------------------------------------------------------------------------------
1 | import Nav from './nav';
2 |
3 | export default 'header';
4 |
--------------------------------------------------------------------------------
/prefetch-plugin/src/components/nav.js:
--------------------------------------------------------------------------------
1 | export default 'nav';
2 |
--------------------------------------------------------------------------------
/prefetch-plugin/src/index.js:
--------------------------------------------------------------------------------
1 | import App from './components/app';
2 |
--------------------------------------------------------------------------------
/prefetch-plugin/stat.json:
--------------------------------------------------------------------------------
1 | {
2 | "errors": [],
3 | "warnings": [],
4 | "version": "1.13.1",
5 | "hash": "abadcc9dccd64f8ebf6f",
6 | "time": 697,
7 | "publicPath": "",
8 | "assetsByChunkName": {
9 | "index": "index.js"
10 | },
11 | "assets": [
12 | {
13 | "name": "index.js",
14 | "size": 2618,
15 | "chunks": [
16 | 0
17 | ],
18 | "chunkNames": [
19 | "index"
20 | ],
21 | "emitted": true
22 | }
23 | ],
24 | "chunks": [
25 | {
26 | "id": 0,
27 | "rendered": true,
28 | "initial": true,
29 | "entry": true,
30 | "extraAsync": false,
31 | "size": 974,
32 | "names": [
33 | "index"
34 | ],
35 | "files": [
36 | "index.js"
37 | ],
38 | "hash": "d439681b500bd51e2ba7",
39 | "parents": [],
40 | "modules": [
41 | {
42 | "id": 0,
43 | "identifier": "/Users/alibaba/Documents/kaian/github-repo/webpack-optimize-example/prefetch-plugin/node_modules/.npminstall/babel-loader/6.2.4/babel-loader/index.js?{\"presets\":[\"react\",\"es2015\",\"stage-0\"],\"plugins\":[\"add-module-exports\"]}!/Users/alibaba/Documents/kaian/github-repo/webpack-optimize-example/prefetch-plugin/src/index.js",
44 | "name": "./src/index.js",
45 | "index": 0,
46 | "index2": 3,
47 | "size": 194,
48 | "cacheable": true,
49 | "built": true,
50 | "optional": false,
51 | "prefetched": false,
52 | "chunks": [
53 | 0
54 | ],
55 | "assets": [],
56 | "issuer": null,
57 | "profile": {
58 | "factory": 21,
59 | "building": 566,
60 | "dependencies": 71
61 | },
62 | "failed": false,
63 | "errors": 0,
64 | "warnings": 0,
65 | "reasons": [],
66 | "source": "'use strict';\n\nvar _app = require('./components/app');\n\nvar _app2 = _interopRequireDefault(_app);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"
67 | },
68 | {
69 | "id": 1,
70 | "identifier": "/Users/alibaba/Documents/kaian/github-repo/webpack-optimize-example/prefetch-plugin/node_modules/.npminstall/babel-loader/6.2.4/babel-loader/index.js?{\"presets\":[\"react\",\"es2015\",\"stage-0\"],\"plugins\":[\"add-module-exports\"]}!/Users/alibaba/Documents/kaian/github-repo/webpack-optimize-example/prefetch-plugin/src/components/app.js",
71 | "name": "./src/components/app.js",
72 | "index": 1,
73 | "index2": 2,
74 | "size": 324,
75 | "cacheable": true,
76 | "built": true,
77 | "optional": false,
78 | "prefetched": true,
79 | "chunks": [
80 | 0
81 | ],
82 | "assets": [],
83 | "issuer": null,
84 | "profile": {
85 | "factory": 389,
86 | "building": 239,
87 | "dependencies": 36
88 | },
89 | "failed": false,
90 | "errors": 0,
91 | "warnings": 0,
92 | "reasons": [
93 | {
94 | "moduleId": 0,
95 | "moduleIdentifier": "/Users/alibaba/Documents/kaian/github-repo/webpack-optimize-example/prefetch-plugin/node_modules/.npminstall/babel-loader/6.2.4/babel-loader/index.js?{\"presets\":[\"react\",\"es2015\",\"stage-0\"],\"plugins\":[\"add-module-exports\"]}!/Users/alibaba/Documents/kaian/github-repo/webpack-optimize-example/prefetch-plugin/src/index.js",
96 | "module": "./src/index.js",
97 | "moduleName": "./src/index.js",
98 | "type": "cjs require",
99 | "userRequest": "./components/app",
100 | "loc": "3:11-38"
101 | }
102 | ],
103 | "source": "'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _header = require('./header');\n\nvar _header2 = _interopRequireDefault(_header);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nexports.default = 'app';\nmodule.exports = exports['default'];"
104 | },
105 | {
106 | "id": 2,
107 | "identifier": "/Users/alibaba/Documents/kaian/github-repo/webpack-optimize-example/prefetch-plugin/node_modules/.npminstall/babel-loader/6.2.4/babel-loader/index.js?{\"presets\":[\"react\",\"es2015\",\"stage-0\"],\"plugins\":[\"add-module-exports\"]}!/Users/alibaba/Documents/kaian/github-repo/webpack-optimize-example/prefetch-plugin/src/components/header.js",
108 | "name": "./src/components/header.js",
109 | "index": 2,
110 | "index2": 1,
111 | "size": 315,
112 | "cacheable": true,
113 | "built": true,
114 | "optional": false,
115 | "prefetched": true,
116 | "chunks": [
117 | 0
118 | ],
119 | "assets": [],
120 | "issuer": null,
121 | "profile": {
122 | "factory": 386,
123 | "building": 257,
124 | "dependencies": 15
125 | },
126 | "failed": false,
127 | "errors": 0,
128 | "warnings": 0,
129 | "reasons": [
130 | {
131 | "moduleId": 1,
132 | "moduleIdentifier": "/Users/alibaba/Documents/kaian/github-repo/webpack-optimize-example/prefetch-plugin/node_modules/.npminstall/babel-loader/6.2.4/babel-loader/index.js?{\"presets\":[\"react\",\"es2015\",\"stage-0\"],\"plugins\":[\"add-module-exports\"]}!/Users/alibaba/Documents/kaian/github-repo/webpack-optimize-example/prefetch-plugin/src/components/app.js",
133 | "module": "./src/components/app.js",
134 | "moduleName": "./src/components/app.js",
135 | "type": "cjs require",
136 | "userRequest": "./header",
137 | "loc": "7:14-33"
138 | }
139 | ],
140 | "source": "'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _nav = require('./nav');\n\nvar _nav2 = _interopRequireDefault(_nav);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nexports.default = 'header';\nmodule.exports = exports['default'];"
141 | },
142 | {
143 | "id": 3,
144 | "identifier": "/Users/alibaba/Documents/kaian/github-repo/webpack-optimize-example/prefetch-plugin/node_modules/.npminstall/babel-loader/6.2.4/babel-loader/index.js?{\"presets\":[\"react\",\"es2015\",\"stage-0\"],\"plugins\":[\"add-module-exports\"]}!/Users/alibaba/Documents/kaian/github-repo/webpack-optimize-example/prefetch-plugin/src/components/nav.js",
145 | "name": "./src/components/nav.js",
146 | "index": 3,
147 | "index2": 0,
148 | "size": 141,
149 | "cacheable": true,
150 | "built": true,
151 | "optional": false,
152 | "prefetched": true,
153 | "chunks": [
154 | 0
155 | ],
156 | "assets": [],
157 | "issuer": null,
158 | "profile": {
159 | "factory": 385,
160 | "building": 265
161 | },
162 | "failed": false,
163 | "errors": 0,
164 | "warnings": 0,
165 | "reasons": [
166 | {
167 | "moduleId": 2,
168 | "moduleIdentifier": "/Users/alibaba/Documents/kaian/github-repo/webpack-optimize-example/prefetch-plugin/node_modules/.npminstall/babel-loader/6.2.4/babel-loader/index.js?{\"presets\":[\"react\",\"es2015\",\"stage-0\"],\"plugins\":[\"add-module-exports\"]}!/Users/alibaba/Documents/kaian/github-repo/webpack-optimize-example/prefetch-plugin/src/components/header.js",
169 | "module": "./src/components/header.js",
170 | "moduleName": "./src/components/header.js",
171 | "type": "cjs require",
172 | "userRequest": "./nav",
173 | "loc": "7:11-27"
174 | }
175 | ],
176 | "source": "'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = 'nav';\nmodule.exports = exports['default'];"
177 | }
178 | ],
179 | "filteredModules": 0,
180 | "origins": [
181 | {
182 | "moduleId": 0,
183 | "module": "/Users/alibaba/Documents/kaian/github-repo/webpack-optimize-example/prefetch-plugin/node_modules/.npminstall/babel-loader/6.2.4/babel-loader/index.js?{\"presets\":[\"react\",\"es2015\",\"stage-0\"],\"plugins\":[\"add-module-exports\"]}!/Users/alibaba/Documents/kaian/github-repo/webpack-optimize-example/prefetch-plugin/src/index.js",
184 | "moduleIdentifier": "/Users/alibaba/Documents/kaian/github-repo/webpack-optimize-example/prefetch-plugin/node_modules/.npminstall/babel-loader/6.2.4/babel-loader/index.js?{\"presets\":[\"react\",\"es2015\",\"stage-0\"],\"plugins\":[\"add-module-exports\"]}!/Users/alibaba/Documents/kaian/github-repo/webpack-optimize-example/prefetch-plugin/src/index.js",
185 | "moduleName": "./src/index.js",
186 | "loc": "",
187 | "name": "index",
188 | "reasons": []
189 | }
190 | ]
191 | }
192 | ],
193 | "modules": [
194 | {
195 | "id": 0,
196 | "identifier": "/Users/alibaba/Documents/kaian/github-repo/webpack-optimize-example/prefetch-plugin/node_modules/.npminstall/babel-loader/6.2.4/babel-loader/index.js?{\"presets\":[\"react\",\"es2015\",\"stage-0\"],\"plugins\":[\"add-module-exports\"]}!/Users/alibaba/Documents/kaian/github-repo/webpack-optimize-example/prefetch-plugin/src/index.js",
197 | "name": "./src/index.js",
198 | "index": 0,
199 | "index2": 3,
200 | "size": 194,
201 | "cacheable": true,
202 | "built": true,
203 | "optional": false,
204 | "prefetched": false,
205 | "chunks": [
206 | 0
207 | ],
208 | "assets": [],
209 | "issuer": null,
210 | "profile": {
211 | "factory": 21,
212 | "building": 566,
213 | "dependencies": 71
214 | },
215 | "failed": false,
216 | "errors": 0,
217 | "warnings": 0,
218 | "reasons": [],
219 | "source": "'use strict';\n\nvar _app = require('./components/app');\n\nvar _app2 = _interopRequireDefault(_app);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"
220 | },
221 | {
222 | "id": 1,
223 | "identifier": "/Users/alibaba/Documents/kaian/github-repo/webpack-optimize-example/prefetch-plugin/node_modules/.npminstall/babel-loader/6.2.4/babel-loader/index.js?{\"presets\":[\"react\",\"es2015\",\"stage-0\"],\"plugins\":[\"add-module-exports\"]}!/Users/alibaba/Documents/kaian/github-repo/webpack-optimize-example/prefetch-plugin/src/components/app.js",
224 | "name": "./src/components/app.js",
225 | "index": 1,
226 | "index2": 2,
227 | "size": 324,
228 | "cacheable": true,
229 | "built": true,
230 | "optional": false,
231 | "prefetched": true,
232 | "chunks": [
233 | 0
234 | ],
235 | "assets": [],
236 | "issuer": null,
237 | "profile": {
238 | "factory": 389,
239 | "building": 239,
240 | "dependencies": 36
241 | },
242 | "failed": false,
243 | "errors": 0,
244 | "warnings": 0,
245 | "reasons": [
246 | {
247 | "moduleId": 0,
248 | "moduleIdentifier": "/Users/alibaba/Documents/kaian/github-repo/webpack-optimize-example/prefetch-plugin/node_modules/.npminstall/babel-loader/6.2.4/babel-loader/index.js?{\"presets\":[\"react\",\"es2015\",\"stage-0\"],\"plugins\":[\"add-module-exports\"]}!/Users/alibaba/Documents/kaian/github-repo/webpack-optimize-example/prefetch-plugin/src/index.js",
249 | "module": "./src/index.js",
250 | "moduleName": "./src/index.js",
251 | "type": "cjs require",
252 | "userRequest": "./components/app",
253 | "loc": "3:11-38"
254 | }
255 | ],
256 | "source": "'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _header = require('./header');\n\nvar _header2 = _interopRequireDefault(_header);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nexports.default = 'app';\nmodule.exports = exports['default'];"
257 | },
258 | {
259 | "id": 2,
260 | "identifier": "/Users/alibaba/Documents/kaian/github-repo/webpack-optimize-example/prefetch-plugin/node_modules/.npminstall/babel-loader/6.2.4/babel-loader/index.js?{\"presets\":[\"react\",\"es2015\",\"stage-0\"],\"plugins\":[\"add-module-exports\"]}!/Users/alibaba/Documents/kaian/github-repo/webpack-optimize-example/prefetch-plugin/src/components/header.js",
261 | "name": "./src/components/header.js",
262 | "index": 2,
263 | "index2": 1,
264 | "size": 315,
265 | "cacheable": true,
266 | "built": true,
267 | "optional": false,
268 | "prefetched": true,
269 | "chunks": [
270 | 0
271 | ],
272 | "assets": [],
273 | "issuer": null,
274 | "profile": {
275 | "factory": 386,
276 | "building": 257,
277 | "dependencies": 15
278 | },
279 | "failed": false,
280 | "errors": 0,
281 | "warnings": 0,
282 | "reasons": [
283 | {
284 | "moduleId": 1,
285 | "moduleIdentifier": "/Users/alibaba/Documents/kaian/github-repo/webpack-optimize-example/prefetch-plugin/node_modules/.npminstall/babel-loader/6.2.4/babel-loader/index.js?{\"presets\":[\"react\",\"es2015\",\"stage-0\"],\"plugins\":[\"add-module-exports\"]}!/Users/alibaba/Documents/kaian/github-repo/webpack-optimize-example/prefetch-plugin/src/components/app.js",
286 | "module": "./src/components/app.js",
287 | "moduleName": "./src/components/app.js",
288 | "type": "cjs require",
289 | "userRequest": "./header",
290 | "loc": "7:14-33"
291 | }
292 | ],
293 | "source": "'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _nav = require('./nav');\n\nvar _nav2 = _interopRequireDefault(_nav);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nexports.default = 'header';\nmodule.exports = exports['default'];"
294 | },
295 | {
296 | "id": 3,
297 | "identifier": "/Users/alibaba/Documents/kaian/github-repo/webpack-optimize-example/prefetch-plugin/node_modules/.npminstall/babel-loader/6.2.4/babel-loader/index.js?{\"presets\":[\"react\",\"es2015\",\"stage-0\"],\"plugins\":[\"add-module-exports\"]}!/Users/alibaba/Documents/kaian/github-repo/webpack-optimize-example/prefetch-plugin/src/components/nav.js",
298 | "name": "./src/components/nav.js",
299 | "index": 3,
300 | "index2": 0,
301 | "size": 141,
302 | "cacheable": true,
303 | "built": true,
304 | "optional": false,
305 | "prefetched": true,
306 | "chunks": [
307 | 0
308 | ],
309 | "assets": [],
310 | "issuer": null,
311 | "profile": {
312 | "factory": 385,
313 | "building": 265
314 | },
315 | "failed": false,
316 | "errors": 0,
317 | "warnings": 0,
318 | "reasons": [
319 | {
320 | "moduleId": 2,
321 | "moduleIdentifier": "/Users/alibaba/Documents/kaian/github-repo/webpack-optimize-example/prefetch-plugin/node_modules/.npminstall/babel-loader/6.2.4/babel-loader/index.js?{\"presets\":[\"react\",\"es2015\",\"stage-0\"],\"plugins\":[\"add-module-exports\"]}!/Users/alibaba/Documents/kaian/github-repo/webpack-optimize-example/prefetch-plugin/src/components/header.js",
322 | "module": "./src/components/header.js",
323 | "moduleName": "./src/components/header.js",
324 | "type": "cjs require",
325 | "userRequest": "./nav",
326 | "loc": "7:11-27"
327 | }
328 | ],
329 | "source": "'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = 'nav';\nmodule.exports = exports['default'];"
330 | }
331 | ],
332 | "filteredModules": 0,
333 | "children": []
334 | }
335 |
--------------------------------------------------------------------------------
/prefetch-plugin/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const webpack = require('webpack');
3 |
4 | /**
5 | * loaders list
6 | */
7 | const loaders = [
8 | {
9 | test: /\.jsx?$/,
10 | exclude: /node_modules/,
11 | loader: 'babel-loader',
12 | query: {
13 | presets: ['react', 'es2015', 'stage-0'],
14 | plugins: ['add-module-exports']
15 | }
16 | }
17 | ];
18 |
19 | /**
20 | * plugins list
21 | */
22 | const plugins = [
23 | new webpack.PrefetchPlugin(path.join(__dirname, './src/components/app.js')),
24 | new webpack.PrefetchPlugin(path.join(__dirname, './src/components/header.js')),
25 | new webpack.PrefetchPlugin(path.join(__dirname, './src/components/nav.js'))
26 | ];
27 |
28 | module.exports = {
29 | entry: {
30 | index: path.join(__dirname, 'src/index.js')
31 | },
32 | output: {
33 | path: path.join(__dirname, 'build'),
34 | filename: '[name].js'
35 | },
36 | module: {
37 | loaders: loaders
38 | },
39 | plugins: plugins
40 | };
41 |
--------------------------------------------------------------------------------
/tree-shaking/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 |
--------------------------------------------------------------------------------
/tree-shaking/README.md:
--------------------------------------------------------------------------------
1 | # Tree Shaking
2 |
3 | You can get more infomation from [rollup.js](http://rollupjs.org/), and it has implement in Webpack2.0
4 |
--------------------------------------------------------------------------------
/tree-shaking/build/index.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 harmory imports with the correct context
37 | /******/ __webpack_require__.i = function(value) { return value; };
38 |
39 | /******/ // define getter function for harmory exports
40 | /******/ __webpack_require__.d = function(exports, name, getter) {
41 | /******/ Object.defineProperty(exports, name, {
42 | /******/ configurable: false,
43 | /******/ enumerable: true,
44 | /******/ get: getter
45 | /******/ });
46 | /******/ };
47 |
48 | /******/ // Object.prototype.hasOwnProperty.call
49 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
50 |
51 | /******/ // __webpack_public_path__
52 | /******/ __webpack_require__.p = "";
53 |
54 | /******/ // Load entry module and return exports
55 | /******/ return __webpack_require__(__webpack_require__.s = 3);
56 | /******/ })
57 | /************************************************************************/
58 | /******/ ([
59 | /* 0 */
60 | /***/ function(module, exports, __webpack_require__) {
61 |
62 | "use strict";
63 | /* harmony export */ exports["a"] = A;/* unused harmony export B */function A() {
64 | return 'body';
65 | }
66 |
67 | function B() {
68 | return 'body2';
69 | }
70 |
71 |
72 | /***/ },
73 | /* 1 */
74 | /***/ function(module, exports, __webpack_require__) {
75 |
76 | "use strict";
77 | /* harmony default export */ exports["a"] = 'footer';
78 |
79 |
80 | /***/ },
81 | /* 2 */
82 | /***/ function(module, exports, __webpack_require__) {
83 |
84 | "use strict";
85 | /* harmony default export */ exports["a"] = 'header';
86 |
87 |
88 | /***/ },
89 | /* 3 */
90 | /***/ function(module, exports, __webpack_require__) {
91 |
92 | "use strict";
93 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__components_header__ = __webpack_require__(2);
94 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__components_body__ = __webpack_require__(0);
95 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__components_footer__ = __webpack_require__(1);
96 |
97 |
98 |
99 |
100 | console.log(__WEBPACK_IMPORTED_MODULE_0__components_header__["a" /* default */], __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__components_body__["a" /* A */])(), __WEBPACK_IMPORTED_MODULE_2__components_footer__["a" /* default */]);
101 |
102 |
103 | /***/ }
104 | /******/ ]);
--------------------------------------------------------------------------------
/tree-shaking/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "webpack-startkit",
3 | "version": "0.0.1",
4 | "description": "Webpack startkit with base configuration",
5 | "main": "build/index.js",
6 | "scripts": {
7 | "clean": "rimraf ./build",
8 | "prebuild": "npm run clean",
9 | "build": "webpack --progress --profile --display-used-exports"
10 | },
11 | "repository": {
12 | "type": "git",
13 | "url": "git+https://github.com/FrendEr/webpack-startkit.git"
14 | },
15 | "author": "FrendEr",
16 | "license": "MIT",
17 | "bugs": {
18 | "url": "https://github.com/FrendEr/webpack-startkit/issues"
19 | },
20 | "homepage": "https://github.com/FrendEr/webpack-startkit#readme",
21 | "devDependencies": {
22 | "rimraf": "^2.5.2",
23 | "webpack": "2.1.0-beta.15"
24 | },
25 | "dependencies": {
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/tree-shaking/src/components/body.js:
--------------------------------------------------------------------------------
1 | export function A() {
2 | return 'body';
3 | }
4 |
5 | export function B() {
6 | return 'body2';
7 | }
8 |
--------------------------------------------------------------------------------
/tree-shaking/src/components/footer.js:
--------------------------------------------------------------------------------
1 | export default 'footer';
2 |
--------------------------------------------------------------------------------
/tree-shaking/src/components/header.js:
--------------------------------------------------------------------------------
1 | export default 'header';
2 |
--------------------------------------------------------------------------------
/tree-shaking/src/index.js:
--------------------------------------------------------------------------------
1 | import Header from './components/header';
2 | import { A } from './components/body';
3 | import Footer from './components/footer';
4 |
5 | console.log(Header, A(), Footer);
6 |
--------------------------------------------------------------------------------
/tree-shaking/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const webpack = require('webpack');
3 |
4 | /**
5 | * loaders list
6 | */
7 | const loaders = [];
8 |
9 | /**
10 | * plugins list
11 | */
12 | const plugins = [];
13 |
14 | module.exports = {
15 | entry: {
16 | index: path.join(__dirname, 'src/index.js')
17 | },
18 | output: {
19 | path: path.join(__dirname, 'build'),
20 | filename: '[name].js'
21 | },
22 | module: {
23 | loaders: loaders
24 | },
25 | plugins: plugins
26 | };
27 |
--------------------------------------------------------------------------------
/uglifyjs/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 |
--------------------------------------------------------------------------------
/uglifyjs/README.md:
--------------------------------------------------------------------------------
1 | # Uglifyjs
2 |
--------------------------------------------------------------------------------
/uglifyjs/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | UglifyJS Example
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/uglifyjs/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "webpack-base",
3 | "version": "0.0.1",
4 | "description": "a webpack base repo",
5 | "main": "build/index.js",
6 | "scripts": {
7 | "clean": "rimraf ./build",
8 | "prebuild": "npm run clean",
9 | "build": "webpack --progress --profile"
10 | },
11 | "repository": {
12 | "type": "git",
13 | "url": "git+https://github.com/FrendEr/webpack-base.git"
14 | },
15 | "author": "FrendEr",
16 | "license": "MIT",
17 | "bugs": {
18 | "url": "https://github.com/FrendEr/webpack-base/issues"
19 | },
20 | "homepage": "https://github.com/FrendEr/webpack-base#readme",
21 | "devDependencies": {
22 | "babel-loader": "^6.2.4",
23 | "babel-plugin-add-module-exports": "^0.2.1",
24 | "babel-preset-es2015": "^6.9.0",
25 | "babel-preset-react": "^6.5.0",
26 | "babel-preset-stage-0": "^6.5.0",
27 | "extract-text-webpack-plugin": "^1.0.1",
28 | "rimraf": "^2.5.2",
29 | "webpack": "^1.13.1"
30 | },
31 | "dependencies": {
32 | "react": "^15.1.0",
33 | "react-dom": "^15.1.0"
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/uglifyjs/src/index.js:
--------------------------------------------------------------------------------
1 | // react 以及 react-dom 通过配置别名引入压缩后的文件，
2 | // 使用 uglify-js@2.6.3 进行压缩，效率大大提升
3 | // #issue : https://github.com/mishoo/UglifyJS2/pull/1024
4 | import React from 'react';
5 | import ReactDOM from 'react-dom';
6 |
7 | ReactDOM.render(
8 | Hello World,
9 | document.getElementById('app')
10 | );
11 |
--------------------------------------------------------------------------------
/uglifyjs/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const webpack = require('webpack');
3 |
4 | /**
5 | * loaders list
6 | */
7 | const loaders = [
8 | {
9 | test: /\.jsx?$/,
10 | exclude: /node_modules/,
11 | loader: 'babel-loader',
12 | query: {
13 | presets: ['react', 'es2015', 'stage-0'],
14 | plugins: ['add-module-exports']
15 | }
16 | }
17 | ];
18 |
19 | /**
20 | * plugins list
21 | */
22 | const plugins = [
23 | new webpack.optimize.UglifyJsPlugin({
24 | mangle: {
25 | except: ['functor']
26 | },
27 | compress: {
28 | warnings: false
29 | }
30 | })
31 | ];
32 |
33 | module.exports = {
34 | entry: {
35 | index: path.join(__dirname, 'src/index.js')
36 | },
37 | output: {
38 | path: path.join(__dirname, 'build'),
39 | filename: '[name].js'
40 | },
41 | resolve: {
42 | alias: {
43 | 'react': path.resolve(__dirname, 'node_modules/react/dist/react.min.js'),
44 | 'react-dom': path.resolve(__dirname, 'node_modules/react-dom/dist/react-dom.min.js')
45 | }
46 | },
47 | module: {
48 | loaders: loaders
49 | },
50 | plugins: plugins
51 | };
52 |
--------------------------------------------------------------------------------
/webpack2.0/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 |
--------------------------------------------------------------------------------
/webpack2.0/README.md:
--------------------------------------------------------------------------------
1 | # Webpack2.0
2 |
--------------------------------------------------------------------------------
/webpack2.0/build/index.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 harmory imports with the correct context
37 | /******/ __webpack_require__.i = function(value) { return value; };
38 |
39 | /******/ // define getter function for harmory exports
40 | /******/ __webpack_require__.d = function(exports, name, getter) {
41 | /******/ Object.defineProperty(exports, name, {
42 | /******/ configurable: false,
43 | /******/ enumerable: true,
44 | /******/ get: getter
45 | /******/ });
46 | /******/ };
47 |
48 | /******/ // Object.prototype.hasOwnProperty.call
49 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
50 |
51 | /******/ // __webpack_public_path__
52 | /******/ __webpack_require__.p = "";
53 |
54 | /******/ // Load entry module and return exports
55 | /******/ return __webpack_require__(__webpack_require__.s = 3);
56 | /******/ })
57 | /************************************************************************/
58 | /******/ ([
59 | /* 0 */
60 | /***/ function(module, exports, __webpack_require__) {
61 |
62 | "use strict";
63 | /* harmony default export */ exports["a"] = 'body';
64 |
65 |
66 | /***/ },
67 | /* 1 */
68 | /***/ function(module, exports) {
69 |
70 | module.exports = 'footer';
71 |
72 |
73 | /***/ },
74 | /* 2 */
75 | /***/ function(module, exports, __webpack_require__) {
76 |
77 | "use strict";
78 | /* harmony default export */ exports["a"] = 'header';
79 |
80 |
81 | /***/ },
82 | /* 3 */
83 | /***/ function(module, exports, __webpack_require__) {
84 |
85 | "use strict";
86 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__components_header__ = __webpack_require__(2);
87 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__components_body__ = __webpack_require__(0);
88 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__components_footer__ = __webpack_require__(1);
89 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__components_footer___default = __WEBPACK_IMPORTED_MODULE_2__components_footer__ && __WEBPACK_IMPORTED_MODULE_2__components_footer__.__esModule ? function() { return __WEBPACK_IMPORTED_MODULE_2__components_footer__['default'] } : function() { return __WEBPACK_IMPORTED_MODULE_2__components_footer__; };
90 | /* harmony import */ __webpack_require__.d(__WEBPACK_IMPORTED_MODULE_2__components_footer___default, 'a', __WEBPACK_IMPORTED_MODULE_2__components_footer___default);
91 |
92 |
93 |
94 |
95 | console.log(__WEBPACK_IMPORTED_MODULE_0__components_header__["a" /* default */], __WEBPACK_IMPORTED_MODULE_1__components_body__["a" /* default */], __WEBPACK_IMPORTED_MODULE_2__components_footer___default.a);
96 |
97 |
98 | /***/ }
99 | /******/ ]);
--------------------------------------------------------------------------------
/webpack2.0/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Webpack2.0 Example
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/webpack2.0/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "webpack-base",
3 | "version": "0.0.1",
4 | "description": "a webpack base repo",
5 | "main": "build/index.js",
6 | "scripts": {
7 | "clean": "rimraf ./build",
8 | "prebuild": "npm run clean",
9 | "build": "webpack --progress --profile"
10 | },
11 | "repository": {
12 | "type": "git",
13 | "url": "git+https://github.com/FrendEr/webpack-base.git"
14 | },
15 | "author": "FrendEr",
16 | "license": "MIT",
17 | "bugs": {
18 | "url": "https://github.com/FrendEr/webpack-base/issues"
19 | },
20 | "homepage": "https://github.com/FrendEr/webpack-base#readme",
21 | "devDependencies": {
22 | "babel-loader": "^6.2.4",
23 | "babel-preset-es2015": "^6.9.0",
24 | "babel-preset-react": "^6.5.0",
25 | "babel-preset-stage-0": "^6.5.0",
26 | "extract-text-webpack-plugin": "^1.0.1",
27 | "rimraf": "^2.5.2",
28 | "webpack": "2.1.0-beta.13"
29 | },
30 | "dependencies": {
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/webpack2.0/src/components/body.js:
--------------------------------------------------------------------------------
1 | export default 'body';
2 |
--------------------------------------------------------------------------------
/webpack2.0/src/components/footer.js:
--------------------------------------------------------------------------------
1 | module.exports = 'footer';
2 |
--------------------------------------------------------------------------------
/webpack2.0/src/components/header.js:
--------------------------------------------------------------------------------
1 | export default 'header';
2 |
--------------------------------------------------------------------------------
/webpack2.0/src/index.js:
--------------------------------------------------------------------------------
1 | import Header from './components/header';
2 | import Body from './components/body';
3 | import Footer from './components/footer';
4 |
5 | console.log(Header, Body, Footer);
6 |
--------------------------------------------------------------------------------
/webpack2.0/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const webpack = require('webpack');
3 |
4 | /**
5 | * loaders list
6 | */
7 | const loaders = [];
8 |
9 | /**
10 | * plugins list
11 | */
12 | const plugins = [];
13 |
14 | module.exports = {
15 | entry: {
16 | index: path.join(__dirname, 'src/index.js')
17 | },
18 | output: {
19 | path: path.join(__dirname, 'build'),
20 | filename: '[name].js'
21 | },
22 | module: {
23 | loaders: loaders
24 | },
25 | plugins: plugins
26 | };
27 |
--------------------------------------------------------------------------------