├── .gitignore ├── 0_simple_ex ├── README.md ├── ex0_common_js │ ├── README.md │ ├── app.js │ └── str.js ├── ex1_common_js │ ├── README.md │ ├── index.html │ ├── js │ │ ├── app.js │ │ └── str.js │ ├── result.js │ └── webpack.config.js ├── ex2_amd │ ├── 1.1.js │ ├── README.md │ ├── index.html │ ├── js │ │ ├── app.js │ │ └── str.js │ ├── result.js │ └── webpack.config.js ├── ex3_jquery_npm │ ├── README.md │ ├── index.html │ ├── js │ │ ├── app.js │ │ └── str.js │ ├── package.json │ ├── result.js │ └── webpack.config.js ├── ex4_jquery_cdn │ ├── README.md │ ├── index.html │ ├── js │ │ ├── app.js │ │ └── str.js │ ├── result.js │ └── webpack.config.js ├── ex5_jquery_bower │ ├── README.md │ ├── bower.json │ ├── index.html │ ├── js │ │ ├── app.js │ │ └── str.js │ ├── package.json │ ├── result.js │ └── webpack.config.js ├── ex6_jquery_right_way │ ├── README.md │ ├── index.html │ ├── js │ │ ├── app.js │ │ └── str.js │ ├── package.json │ ├── result.js │ ├── vendor │ │ └── jquery-1.3.js │ └── webpack.config.js └── ex7_global_jquery │ ├── README.md │ ├── index.html │ ├── js │ ├── app.js │ └── str.js │ ├── package.json │ ├── result.js │ └── webpack.config.js ├── 1_loaders ├── ex0_es6 │ ├── index.html │ ├── js │ │ ├── app.js │ │ └── str.js │ ├── package.json │ ├── result.js │ └── webpack.config.js ├── ex1_my_json_loader │ ├── index.html │ ├── js │ │ ├── app.js │ │ ├── str.js │ │ └── world.json │ ├── result.js │ ├── web_loaders │ │ └── my_json_loader.js │ └── webpack.config.js ├── ex2_css_loader │ ├── css │ │ ├── app.css │ │ └── base.css │ ├── index.html │ ├── js │ │ ├── app.js │ │ └── str.js │ ├── package.json │ ├── result.js │ └── webpack.config.js ├── ex3_url_loader │ ├── 9ded4d336121a79467961c17bd063c4a.jpg │ ├── css │ │ └── app.css │ ├── img │ │ ├── background.jpg │ │ └── icon.png │ ├── index.html │ ├── js │ │ ├── app.js │ │ └── str.js │ ├── package.json │ ├── result.js │ └── webpack.config.js ├── ex4_image_loader │ ├── 9ded4d336121a79467961c17bd063c4a.jpg │ ├── css │ │ └── app.css │ ├── img │ │ ├── background.jpg │ │ └── icon.png │ ├── index.html │ ├── js │ │ ├── app.js │ │ └── str.js │ ├── package.json │ ├── result.js │ └── webpack.config.js ├── ex5_fonts_loader │ ├── fonts │ │ ├── font-icons.eot │ │ ├── font-icons.svg │ │ ├── font-icons.ttf │ │ └── font-icons.woff │ ├── index.html │ ├── js │ │ ├── app.js │ │ └── str.js │ ├── less │ │ ├── app.less │ │ ├── ratings.less │ │ └── review_widget_fonts.less │ ├── package.json │ ├── result.js │ └── webpack.config.js ├── ex6_preloaders │ ├── index.html │ ├── js │ │ ├── app.js │ │ └── str.js │ ├── package.json │ ├── result.js │ └── webpack.config.js └── ex7_postloaders │ ├── index.html │ ├── js │ ├── app.js │ └── str.js │ ├── package.json │ ├── result.js │ └── webpack.config.js ├── 2_plugins ├── ex0_my_plugin │ ├── index.html │ ├── js │ │ ├── app.js │ │ └── str.js │ ├── plugins │ │ └── MyPlugin.js │ ├── result.js │ └── webpack.config.js ├── ex1_notify │ ├── index.html │ ├── js │ │ ├── app.js │ │ └── str.js │ ├── package.json │ ├── plugins │ │ ├── WebpackNotify.js │ │ ├── webpack_error.png │ │ ├── webpack_ok.png │ │ └── webpack_warning.png │ ├── result.js │ └── webpack.config.js ├── ex2_define_plugin │ ├── index.html │ ├── js │ │ ├── app.js │ │ └── str.js │ ├── package.json │ ├── result.js │ └── webpack.config.js ├── ex3_extract_text │ ├── fonts │ │ ├── font-icons.eot │ │ ├── font-icons.svg │ │ ├── font-icons.ttf │ │ └── font-icons.woff │ ├── index.html │ ├── js │ │ ├── app.js │ │ └── str.js │ ├── less │ │ ├── app.less │ │ ├── ratings.less │ │ └── review_widget_fonts.less │ ├── package.json │ ├── result.css │ ├── result.js │ └── webpack.config.js ├── ex4_deduplication │ ├── index.html │ ├── js │ │ ├── app.js │ │ ├── str.js │ │ └── str2.js │ ├── package.json │ ├── result.js │ └── webpack.config.js ├── ex5_stats │ ├── index.html │ ├── js │ │ ├── app.js │ │ └── str.js │ ├── package.json │ ├── result.js │ ├── stats.json │ └── webpack.config.js ├── ex6_i18n │ ├── index.html │ ├── js │ │ ├── app.js │ │ └── str.js │ ├── package.json │ ├── result.en.js │ ├── result.ru.js │ ├── ru.json │ └── webpack.config.js └── ex7_html │ ├── index.html │ ├── js │ ├── app.js │ └── str.js │ ├── package.json │ ├── result.js │ └── webpack.config.js ├── 3_chunks ├── ex0_commons_chunk │ ├── common.js │ ├── js │ │ ├── page1.js │ │ ├── page2.js │ │ └── str.js │ ├── package.json │ ├── page1.html │ ├── page1.js │ ├── page2.html │ ├── page2.js │ └── webpack.config.js ├── ex1_vendor │ ├── js │ │ ├── page1.js │ │ ├── page2.js │ │ └── str.js │ ├── package.json │ ├── page1.html │ ├── page1.js │ ├── page2.html │ ├── page2.js │ ├── vendor.js │ └── webpack.config.js ├── ex2_ensure │ ├── 1.1.js │ ├── js │ │ ├── page1.js │ │ ├── page2.js │ │ └── str.js │ ├── package.json │ ├── page1.html │ ├── page1.js │ ├── page2.html │ ├── page2.js │ └── webpack.config.js ├── ex3_common_css │ ├── common.css │ ├── common.js │ ├── css │ │ ├── base.css │ │ ├── page1.css │ │ └── page2.css │ ├── fonts │ │ ├── font-icons.eot │ │ ├── font-icons.svg │ │ ├── font-icons.ttf │ │ └── font-icons.woff │ ├── js │ │ ├── page1.js │ │ ├── page2.js │ │ └── str.js │ ├── package.json │ ├── page1.css │ ├── page1.html │ ├── page1.js │ ├── page2.css │ ├── page2.html │ ├── page2.js │ └── webpack.config.js └── ex4_common_scss │ ├── common.css │ ├── common.js │ ├── css │ ├── base.scss │ ├── page1.scss │ └── page2.scss │ ├── fonts │ ├── font-icons.eot │ ├── font-icons.svg │ ├── font-icons.ttf │ └── font-icons.woff │ ├── js │ ├── page1.js │ ├── page2.js │ └── str.js │ ├── package.json │ ├── page1.css │ ├── page1.html │ ├── page1.js │ ├── page2.css │ ├── page2.html │ ├── page2.js │ └── webpack.config.js ├── 4_common_cases ├── ex0_source_map │ ├── index.html │ ├── js │ │ ├── app.js │ │ └── str.js │ ├── result.js │ ├── result.js.map │ └── webpack.config.js └── ex1_uglify │ ├── index.html │ ├── js │ ├── app.js │ └── str.js │ ├── package.json │ ├── result.js │ ├── result.js.map │ └── webpack.config.js └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | node_modules 3 | bower_components -------------------------------------------------------------------------------- /0_simple_ex/README.md: -------------------------------------------------------------------------------- 1 | # Simple examples of building javascript assets. -------------------------------------------------------------------------------- /0_simple_ex/ex0_common_js/README.md: -------------------------------------------------------------------------------- 1 | # CommonJS modules 2 | 3 | Please check this [site](http://www.commonjs.org/) for more information. 4 | 5 | In this example module `str.js` is required in the module `app.js`. Node Js automatically supports commonjs modules. You may use this console command to run the code `node app.js`. 6 | 7 | So ok it's cool. But how to use this script in browsers? 8 | You may use webpack command 9 | ```webpack app.js result.js``` 10 | and you get a javascript file (`result.js`) that you may use in browser. 11 | -------------------------------------------------------------------------------- /0_simple_ex/ex0_common_js/app.js: -------------------------------------------------------------------------------- 1 | var str = require('./str'); 2 | 3 | console.log(str.format('Hello {0}!', 'World')); -------------------------------------------------------------------------------- /0_simple_ex/ex0_common_js/str.js: -------------------------------------------------------------------------------- 1 | function format(string, obj) { 2 | var result = string; 3 | if (!(obj instanceof Object) || arguments.length > 2) { 4 | var args = []; 5 | for (var i = 1; i < arguments.length; i++) { 6 | args.push(arguments[i]); 7 | } 8 | obj = args; 9 | } 10 | for (var name in obj) { 11 | if (obj.hasOwnProperty(name)) { 12 | result = replaceToken(result, name, obj[name]); 13 | } 14 | } 15 | return result; 16 | } 17 | 18 | function replaceToken(string, tokenName, value) { 19 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 20 | if (string && pattern.test(string)) { 21 | string = string.replace(pattern, value); 22 | } 23 | return string 24 | } 25 | 26 | 27 | module.exports = { 28 | format: format 29 | }; -------------------------------------------------------------------------------- /0_simple_ex/ex1_common_js/README.md: -------------------------------------------------------------------------------- 1 | # CommonJs modules with webpack config 2 | 3 | Let's create config file for [previous](../ex0_common_js) example. 4 | 5 | Usually configuration stored in file `webpack.config.js`. We added path to source file into `entry` and added path to output assets into `output`. 6 | 7 | ``` javascript 8 | module.exports = { 9 | entry: { 10 | result: './js/app.js' 11 | }, 12 | output: { 13 | filename: '[name].js' 14 | } 15 | }; 16 | ``` 17 | 18 | And now just run a command `webpack` in order to build js. 19 | 20 | You may found more configuration options on [this page](http://webpack.github.io/docs/configuration.html). 21 | -------------------------------------------------------------------------------- /0_simple_ex/ex1_common_js/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /0_simple_ex/ex1_common_js/js/app.js: -------------------------------------------------------------------------------- 1 | var str = require('./str'); 2 | 3 | console.log(str.format('Hello {0}!', 'World')); -------------------------------------------------------------------------------- /0_simple_ex/ex1_common_js/js/str.js: -------------------------------------------------------------------------------- 1 | function format(string, obj) { 2 | var result = string; 3 | if (!(obj instanceof Object) || arguments.length > 2) { 4 | var args = []; 5 | for (var i = 1; i < arguments.length; i++) { 6 | args.push(arguments[i]); 7 | } 8 | obj = args; 9 | } 10 | for (var name in obj) { 11 | if (obj.hasOwnProperty(name)) { 12 | result = replaceToken(result, name, obj[name]); 13 | } 14 | } 15 | return result; 16 | } 17 | 18 | function replaceToken(string, tokenName, value) { 19 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 20 | if (string && pattern.test(string)) { 21 | string = string.replace(pattern, value); 22 | } 23 | return string 24 | } 25 | 26 | 27 | module.exports = { 28 | format: format 29 | }; -------------------------------------------------------------------------------- /0_simple_ex/ex1_common_js/result.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 | var str = __webpack_require__(1); 48 | 49 | console.log(str.format('Hello {0}!', 'World')); 50 | 51 | /***/ }, 52 | /* 1 */ 53 | /***/ function(module, exports, __webpack_require__) { 54 | 55 | function format(string, obj) { 56 | var result = string; 57 | if (!(obj instanceof Object) || arguments.length > 2) { 58 | var args = []; 59 | for (var i = 1; i < arguments.length; i++) { 60 | args.push(arguments[i]); 61 | } 62 | obj = args; 63 | } 64 | for (var name in obj) { 65 | if (obj.hasOwnProperty(name)) { 66 | result = replaceToken(result, name, obj[name]); 67 | } 68 | } 69 | return result; 70 | } 71 | 72 | function replaceToken(string, tokenName, value) { 73 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 74 | if (string && pattern.test(string)) { 75 | string = string.replace(pattern, value); 76 | } 77 | return string 78 | } 79 | 80 | 81 | module.exports = { 82 | format: format 83 | }; 84 | 85 | /***/ } 86 | /******/ ]) -------------------------------------------------------------------------------- /0_simple_ex/ex1_common_js/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: { 3 | result: './js/app.js' 4 | }, 5 | output: { 6 | filename: '[name].js' 7 | } 8 | }; -------------------------------------------------------------------------------- /0_simple_ex/ex2_amd/1.1.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([1],[ 2 | /* 0 */, 3 | /* 1 */ 4 | /***/ function(module, exports, __webpack_require__) { 5 | 6 | var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function () { 7 | function format(string, obj) { 8 | var result = string; 9 | if (!(obj instanceof Object) || arguments.length > 2) { 10 | var args = []; 11 | for (var i = 1; i < arguments.length; i++) { 12 | args.push(arguments[i]); 13 | } 14 | obj = args; 15 | } 16 | for (var name in obj) { 17 | if (obj.hasOwnProperty(name)) { 18 | result = replaceToken(result, name, obj[name]); 19 | } 20 | } 21 | return result; 22 | } 23 | 24 | function replaceToken(string, tokenName, value) { 25 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 26 | if (string && pattern.test(string)) { 27 | string = string.replace(pattern, value); 28 | } 29 | return string 30 | } 31 | 32 | return { 33 | format: format 34 | } 35 | }.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); 36 | 37 | /***/ } 38 | ]); -------------------------------------------------------------------------------- /0_simple_ex/ex2_amd/README.md: -------------------------------------------------------------------------------- 1 | # AMD modules in webpack 2 | 3 | Good news. If you prefer AMD modules for any reason, you have to do nothing to work with them. 4 | 5 | Check current example with AMD modules. 6 | -------------------------------------------------------------------------------- /0_simple_ex/ex2_amd/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /0_simple_ex/ex2_amd/js/app.js: -------------------------------------------------------------------------------- 1 | require(['./str'], function (str) { 2 | console.log(str.format('Hello {0}!', 'World')); 3 | }); -------------------------------------------------------------------------------- /0_simple_ex/ex2_amd/js/str.js: -------------------------------------------------------------------------------- 1 | define([], function () { 2 | function format(string, obj) { 3 | var result = string; 4 | if (!(obj instanceof Object) || arguments.length > 2) { 5 | var args = []; 6 | for (var i = 1; i < arguments.length; i++) { 7 | args.push(arguments[i]); 8 | } 9 | obj = args; 10 | } 11 | for (var name in obj) { 12 | if (obj.hasOwnProperty(name)) { 13 | result = replaceToken(result, name, obj[name]); 14 | } 15 | } 16 | return result; 17 | } 18 | 19 | function replaceToken(string, tokenName, value) { 20 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 21 | if (string && pattern.test(string)) { 22 | string = string.replace(pattern, value); 23 | } 24 | return string 25 | } 26 | 27 | return { 28 | format: format 29 | } 30 | }); -------------------------------------------------------------------------------- /0_simple_ex/ex2_amd/result.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 | /******/ script.src = __webpack_require__.p + "" + chunkId + "." + ({}[chunkId]||chunkId) + ".js"; 76 | /******/ head.appendChild(script); 77 | /******/ } 78 | /******/ }; 79 | /******/ 80 | /******/ // expose the modules object (__webpack_modules__) 81 | /******/ __webpack_require__.m = modules; 82 | /******/ 83 | /******/ // expose the module cache 84 | /******/ __webpack_require__.c = installedModules; 85 | /******/ 86 | /******/ // __webpack_public_path__ 87 | /******/ __webpack_require__.p = ""; 88 | /******/ 89 | /******/ // Load entry module and return exports 90 | /******/ return __webpack_require__(0); 91 | /******/ }) 92 | /************************************************************************/ 93 | /******/ ([ 94 | /* 0 */ 95 | /***/ function(module, exports, __webpack_require__) { 96 | 97 | __webpack_require__.e/* require */(1, function(__webpack_require__) { var __WEBPACK_AMD_REQUIRE_ARRAY__ = [__webpack_require__(1)]; (function (str) { 98 | console.log(str.format('Hello {0}!', 'World')); 99 | }.apply(null, __WEBPACK_AMD_REQUIRE_ARRAY__));}); 100 | 101 | /***/ } 102 | /******/ ]) -------------------------------------------------------------------------------- /0_simple_ex/ex2_amd/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: { 3 | result: './js/app.js' 4 | }, 5 | output: { 6 | filename: '[name].js' 7 | } 8 | }; -------------------------------------------------------------------------------- /0_simple_ex/ex3_jquery_npm/README.md: -------------------------------------------------------------------------------- 1 | # Add dependency from npm to your modules 2 | 3 | Ok how to use a other libraries in this code? Let's say jquery. 4 | 5 | The easiest way to use some library - install it like a npm dependency. Right now most of the biggest js libraries (like jquery) have a npm package. 6 | 7 | It easy to install command: `npm install jquery --save-dev` 8 | and easy to use `var $ = require('jquery')` in your code. 9 | 10 | Please pay attention that config file didn't change. npm packages supported by default. 11 | -------------------------------------------------------------------------------- /0_simple_ex/ex3_jquery_npm/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /0_simple_ex/ex3_jquery_npm/js/app.js: -------------------------------------------------------------------------------- 1 | var str = require('./str'), 2 | $ = require('jquery'); 3 | 4 | $('.js-my-div').text(str.format('Hello {0}!', 'World')); 5 | -------------------------------------------------------------------------------- /0_simple_ex/ex3_jquery_npm/js/str.js: -------------------------------------------------------------------------------- 1 | function format(string, obj) { 2 | var result = string; 3 | if (!(obj instanceof Object) || arguments.length > 2) { 4 | var args = []; 5 | for (var i = 1; i < arguments.length; i++) { 6 | args.push(arguments[i]); 7 | } 8 | obj = args; 9 | } 10 | for (var name in obj) { 11 | if (obj.hasOwnProperty(name)) { 12 | result = replaceToken(result, name, obj[name]); 13 | } 14 | } 15 | return result; 16 | } 17 | 18 | function replaceToken(string, tokenName, value) { 19 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 20 | if (string && pattern.test(string)) { 21 | string = string.replace(pattern, value); 22 | } 23 | return string 24 | } 25 | 26 | 27 | module.exports = { 28 | format: format 29 | }; -------------------------------------------------------------------------------- /0_simple_ex/ex3_jquery_npm/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ex3_jquery_npm", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "result.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "jquery": "^2.1.4" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /0_simple_ex/ex3_jquery_npm/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: { 3 | result: './js/app.js' 4 | }, 5 | output: { 6 | filename: '[name].js' 7 | } 8 | }; -------------------------------------------------------------------------------- /0_simple_ex/ex4_jquery_cdn/README.md: -------------------------------------------------------------------------------- 1 | # Add dependency from cdn to your modules 2 | 3 | Let's see how to use a jquery from CDN: `https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js` 4 | 5 | All that we need: 2 simple steps. 6 | 7 | 1. add jquery dependency in a html file: `` 8 | 9 | 2. Add `externals` option into your config `externals: { "jquery": "jQuery" }` 10 | -------------------------------------------------------------------------------- /0_simple_ex/ex4_jquery_cdn/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /0_simple_ex/ex4_jquery_cdn/js/app.js: -------------------------------------------------------------------------------- 1 | var str = require('./str'), 2 | $ = require('jquery'); 3 | 4 | $('.js-my-div').text(str.format('Hello {0}!', 'World')); 5 | -------------------------------------------------------------------------------- /0_simple_ex/ex4_jquery_cdn/js/str.js: -------------------------------------------------------------------------------- 1 | function format(string, obj) { 2 | var result = string; 3 | if (!(obj instanceof Object) || arguments.length > 2) { 4 | var args = []; 5 | for (var i = 1; i < arguments.length; i++) { 6 | args.push(arguments[i]); 7 | } 8 | obj = args; 9 | } 10 | for (var name in obj) { 11 | if (obj.hasOwnProperty(name)) { 12 | result = replaceToken(result, name, obj[name]); 13 | } 14 | } 15 | return result; 16 | } 17 | 18 | function replaceToken(string, tokenName, value) { 19 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 20 | if (string && pattern.test(string)) { 21 | string = string.replace(pattern, value); 22 | } 23 | return string 24 | } 25 | 26 | 27 | module.exports = { 28 | format: format 29 | }; -------------------------------------------------------------------------------- /0_simple_ex/ex4_jquery_cdn/result.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 | var str = __webpack_require__(2), 48 | $ = __webpack_require__(1); 49 | 50 | $('.js-my-div').text(str.format('Hello {0}!', 'World')); 51 | 52 | 53 | /***/ }, 54 | /* 1 */ 55 | /***/ function(module, exports, __webpack_require__) { 56 | 57 | module.exports = jQuery; 58 | 59 | /***/ }, 60 | /* 2 */ 61 | /***/ function(module, exports, __webpack_require__) { 62 | 63 | function format(string, obj) { 64 | var result = string; 65 | if (!(obj instanceof Object) || arguments.length > 2) { 66 | var args = []; 67 | for (var i = 1; i < arguments.length; i++) { 68 | args.push(arguments[i]); 69 | } 70 | obj = args; 71 | } 72 | for (var name in obj) { 73 | if (obj.hasOwnProperty(name)) { 74 | result = replaceToken(result, name, obj[name]); 75 | } 76 | } 77 | return result; 78 | } 79 | 80 | function replaceToken(string, tokenName, value) { 81 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 82 | if (string && pattern.test(string)) { 83 | string = string.replace(pattern, value); 84 | } 85 | return string 86 | } 87 | 88 | 89 | module.exports = { 90 | format: format 91 | }; 92 | 93 | /***/ } 94 | /******/ ]) -------------------------------------------------------------------------------- /0_simple_ex/ex4_jquery_cdn/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: { 3 | result: './js/app.js' 4 | }, 5 | output: { 6 | filename: '[name].js' 7 | }, 8 | externals: { 9 | "jquery": "jQuery" 10 | } 11 | }; -------------------------------------------------------------------------------- /0_simple_ex/ex5_jquery_bower/README.md: -------------------------------------------------------------------------------- 1 | # Add dependency from bower to your modules 2 | 3 | If you would like use packages only from *bower*, or if some library provide installation only via this package manager, you may do it. 4 | 5 | Let's add jquery as a *bower* dependency. 6 | 7 | `bower init` - to generate json config file. 8 | 9 | `bower install jquery --save-dev` - install *jquery* and change *bower* config file. 10 | 11 | `npm install bower-webpack-plugin --save-dev` - install special webpack [plugin](https://github.com/lpiepiora/bower-webpack-plugin). 12 | 13 | And change your configuration: 14 | 15 | 16 | ``` 17 | var BowerWebpackPlugin = require("bower-webpack-plugin"); 18 | 19 | module.exports = { 20 | entry: { 21 | result: './js/app.js' 22 | }, 23 | output: { 24 | filename: '[name].js' 25 | }, 26 | plugins: [ 27 | new BowerWebpackPlugin() 28 | ] 29 | }; 30 | ``` 31 | -------------------------------------------------------------------------------- /0_simple_ex/ex5_jquery_bower/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ex5_jquery_bower", 3 | "version": "0.0.0", 4 | "homepage": "https://github.com/erm0l0v/webpack_examples", 5 | "authors": [ 6 | "erm0l0v " 7 | ], 8 | "license": "MIT", 9 | "ignore": [ 10 | "**/.*", 11 | "node_modules", 12 | "bower_components", 13 | "test", 14 | "tests" 15 | ], 16 | "devDependencies": { 17 | "jquery": "~2.1.4" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /0_simple_ex/ex5_jquery_bower/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /0_simple_ex/ex5_jquery_bower/js/app.js: -------------------------------------------------------------------------------- 1 | var str = require('./str'), 2 | $ = require('jquery'); 3 | 4 | $('.js-my-div').text(str.format('Hello {0}!', 'World')); 5 | -------------------------------------------------------------------------------- /0_simple_ex/ex5_jquery_bower/js/str.js: -------------------------------------------------------------------------------- 1 | function format(string, obj) { 2 | var result = string; 3 | if (!(obj instanceof Object) || arguments.length > 2) { 4 | var args = []; 5 | for (var i = 1; i < arguments.length; i++) { 6 | args.push(arguments[i]); 7 | } 8 | obj = args; 9 | } 10 | for (var name in obj) { 11 | if (obj.hasOwnProperty(name)) { 12 | result = replaceToken(result, name, obj[name]); 13 | } 14 | } 15 | return result; 16 | } 17 | 18 | function replaceToken(string, tokenName, value) { 19 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 20 | if (string && pattern.test(string)) { 21 | string = string.replace(pattern, value); 22 | } 23 | return string 24 | } 25 | 26 | 27 | module.exports = { 28 | format: format 29 | }; -------------------------------------------------------------------------------- /0_simple_ex/ex5_jquery_bower/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ex5_jquery_bower", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "result.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "bower-webpack-plugin": "^0.1.8", 13 | "node-libs-browser": "^0.5.0", 14 | "webpack": "^1.9.7" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /0_simple_ex/ex5_jquery_bower/webpack.config.js: -------------------------------------------------------------------------------- 1 | var BowerWebpackPlugin = require("bower-webpack-plugin"); 2 | 3 | module.exports = { 4 | entry: { 5 | result: './js/app.js' 6 | }, 7 | output: { 8 | filename: '[name].js' 9 | }, 10 | plugins: [ 11 | new BowerWebpackPlugin() 12 | ] 13 | }; -------------------------------------------------------------------------------- /0_simple_ex/ex6_jquery_right_way/README.md: -------------------------------------------------------------------------------- 1 | # Add a simple js file like a commonJs module. 2 | 3 | This example shows how to add dependency to the simple javascript file. 4 | 5 | Let it be *jquery* 1.3 (this version not support AMD/CommonJS modules) 6 | 7 | First you need to export objects/functions via *exports* loader: 8 | 9 | ```javascript 10 | var jquery_path = path.join(__dirname, 'vendor/jquery-1.3.js'); 11 | 12 | // in config: 13 | module: { 14 | loaders: [ 15 | { test: jquery_path, loader: 'exports?window.jQuery' } 16 | ] 17 | }, 18 | ``` 19 | 20 | It's absolutely the same if we add this code at the end of *jquery* file: 21 | 22 | ```javascript 23 | module.exports = window.jQuery; 24 | ``` 25 | 26 | Second: just add alias for *jquery*: 27 | 28 | ```javascript 29 | resolve:{ 30 | alias: { 31 | 'jquery': jquery_path 32 | } 33 | } 34 | ``` 35 | 36 | And now you may use `var $ = require('jquery');` in your code. 37 | -------------------------------------------------------------------------------- /0_simple_ex/ex6_jquery_right_way/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /0_simple_ex/ex6_jquery_right_way/js/app.js: -------------------------------------------------------------------------------- 1 | var str = require('./str'), 2 | $ = require('jquery'); 3 | 4 | $('.js-my-div').text(str.format('Hello {0}!', 'World')); 5 | -------------------------------------------------------------------------------- /0_simple_ex/ex6_jquery_right_way/js/str.js: -------------------------------------------------------------------------------- 1 | function format(string, obj) { 2 | var result = string; 3 | if (!(obj instanceof Object) || arguments.length > 2) { 4 | var args = []; 5 | for (var i = 1; i < arguments.length; i++) { 6 | args.push(arguments[i]); 7 | } 8 | obj = args; 9 | } 10 | for (var name in obj) { 11 | if (obj.hasOwnProperty(name)) { 12 | result = replaceToken(result, name, obj[name]); 13 | } 14 | } 15 | return result; 16 | } 17 | 18 | function replaceToken(string, tokenName, value) { 19 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 20 | if (string && pattern.test(string)) { 21 | string = string.replace(pattern, value); 22 | } 23 | return string 24 | } 25 | 26 | 27 | module.exports = { 28 | format: format 29 | }; -------------------------------------------------------------------------------- /0_simple_ex/ex6_jquery_right_way/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ex6_jquery_right_way", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "result.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "exports-loader": "^0.6.2" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /0_simple_ex/ex6_jquery_right_way/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | 3 | var jquery_path = path.join(__dirname, 'vendor/jquery-1.3.js'); 4 | 5 | module.exports = { 6 | entry: { 7 | result: './js/app.js' 8 | }, 9 | output: { 10 | filename: '[name].js' 11 | }, 12 | module: { 13 | loaders: [ 14 | { test: jquery_path, loader: 'exports?window.jQuery' } 15 | ] 16 | }, 17 | resolve:{ 18 | alias: { 19 | 'jquery': jquery_path 20 | } 21 | } 22 | }; -------------------------------------------------------------------------------- /0_simple_ex/ex7_global_jquery/README.md: -------------------------------------------------------------------------------- 1 | # Get rid of `var $ = require('jquery')` line in your code. -------------------------------------------------------------------------------- /0_simple_ex/ex7_global_jquery/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /0_simple_ex/ex7_global_jquery/js/app.js: -------------------------------------------------------------------------------- 1 | var str = require('./str'); 2 | 3 | $('.js-my-div').text(str.format('Hello {0}!', 'World')); 4 | -------------------------------------------------------------------------------- /0_simple_ex/ex7_global_jquery/js/str.js: -------------------------------------------------------------------------------- 1 | function format(string, obj) { 2 | var result = string; 3 | if (!(obj instanceof Object) || arguments.length > 2) { 4 | var args = []; 5 | for (var i = 1; i < arguments.length; i++) { 6 | args.push(arguments[i]); 7 | } 8 | obj = args; 9 | } 10 | for (var name in obj) { 11 | if (obj.hasOwnProperty(name)) { 12 | result = replaceToken(result, name, obj[name]); 13 | } 14 | } 15 | return result; 16 | } 17 | 18 | function replaceToken(string, tokenName, value) { 19 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 20 | if (string && pattern.test(string)) { 21 | string = string.replace(pattern, value); 22 | } 23 | return string 24 | } 25 | 26 | 27 | module.exports = { 28 | format: format 29 | }; -------------------------------------------------------------------------------- /0_simple_ex/ex7_global_jquery/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ex7_global_jquery", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "result.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "jquery": "^2.1.4", 13 | "node-libs-browser": "^0.5.0", 14 | "webpack": "^1.9.7" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /0_simple_ex/ex7_global_jquery/webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | 3 | module.exports = { 4 | entry: { 5 | result: './js/app.js' 6 | }, 7 | output: { 8 | filename: '[name].js' 9 | }, 10 | plugins: [ 11 | new webpack.ProvidePlugin({ 12 | $: "jquery", 13 | jQuery: "jquery", 14 | "window.jQuery": "jquery" 15 | }) 16 | ] 17 | }; -------------------------------------------------------------------------------- /1_loaders/ex0_es6/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /1_loaders/ex0_es6/js/app.js: -------------------------------------------------------------------------------- 1 | import {format} from './str'; 2 | 3 | console.log(format('Hello {0}!', 'World')); -------------------------------------------------------------------------------- /1_loaders/ex0_es6/js/str.js: -------------------------------------------------------------------------------- 1 | export function format(string, obj) { 2 | var result = string; 3 | if (!(obj instanceof Object) || arguments.length > 2) { 4 | var args = []; 5 | for (var i = 1; i < arguments.length; i++) { 6 | args.push(arguments[i]); 7 | } 8 | obj = args; 9 | } 10 | for (var name in obj) { 11 | if (obj.hasOwnProperty(name)) { 12 | result = replaceToken(result, name, obj[name]); 13 | } 14 | } 15 | return result; 16 | } 17 | 18 | function replaceToken(string, tokenName, value) { 19 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 20 | if (string && pattern.test(string)) { 21 | string = string.replace(pattern, value); 22 | } 23 | return string 24 | } 25 | -------------------------------------------------------------------------------- /1_loaders/ex0_es6/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ex0_es6", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "result.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "babel-core": "^5.4.7", 13 | "babel-loader": "^5.1.3", 14 | "node-libs-browser": "^0.5.2", 15 | "webpack": "^1.9.8" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /1_loaders/ex0_es6/result.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 _str = __webpack_require__(1); 50 | 51 | console.log((0, _str.format)('Hello {0}!', 'World')); 52 | 53 | /***/ }, 54 | /* 1 */ 55 | /***/ function(module, exports, __webpack_require__) { 56 | 57 | "use strict"; 58 | 59 | Object.defineProperty(exports, "__esModule", { 60 | value: true 61 | }); 62 | exports.format = format; 63 | 64 | function format(string, obj) { 65 | var result = string; 66 | if (!(obj instanceof Object) || arguments.length > 2) { 67 | var args = []; 68 | for (var i = 1; i < arguments.length; i++) { 69 | args.push(arguments[i]); 70 | } 71 | obj = args; 72 | } 73 | for (var name in obj) { 74 | if (obj.hasOwnProperty(name)) { 75 | result = replaceToken(result, name, obj[name]); 76 | } 77 | } 78 | return result; 79 | } 80 | 81 | function replaceToken(string, tokenName, value) { 82 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 83 | if (string && pattern.test(string)) { 84 | string = string.replace(pattern, value); 85 | } 86 | return string; 87 | } 88 | 89 | /***/ } 90 | /******/ ]); -------------------------------------------------------------------------------- /1_loaders/ex0_es6/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: { 3 | result: './js/app.js' 4 | }, 5 | output: { 6 | filename: '[name].js' 7 | }, 8 | module: { 9 | loaders: [ 10 | { test: /\.js$/, loader: 'babel-loader' } 11 | ] 12 | } 13 | }; -------------------------------------------------------------------------------- /1_loaders/ex1_my_json_loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /1_loaders/ex1_my_json_loader/js/app.js: -------------------------------------------------------------------------------- 1 | var str = require('./str'), 2 | world = require('./world.json'); 3 | 4 | console.log(str.format('Hello {0}!', world.world)); -------------------------------------------------------------------------------- /1_loaders/ex1_my_json_loader/js/str.js: -------------------------------------------------------------------------------- 1 | function format(string, obj) { 2 | var result = string; 3 | if (!(obj instanceof Object) || arguments.length > 2) { 4 | var args = []; 5 | for (var i = 1; i < arguments.length; i++) { 6 | args.push(arguments[i]); 7 | } 8 | obj = args; 9 | } 10 | for (var name in obj) { 11 | if (obj.hasOwnProperty(name)) { 12 | result = replaceToken(result, name, obj[name]); 13 | } 14 | } 15 | return result; 16 | } 17 | 18 | function replaceToken(string, tokenName, value) { 19 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 20 | if (string && pattern.test(string)) { 21 | string = string.replace(pattern, value); 22 | } 23 | return string 24 | } 25 | 26 | 27 | module.exports = { 28 | format: format 29 | }; -------------------------------------------------------------------------------- /1_loaders/ex1_my_json_loader/js/world.json: -------------------------------------------------------------------------------- 1 | { 2 | "world": "World" 3 | } -------------------------------------------------------------------------------- /1_loaders/ex1_my_json_loader/result.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 | var str = __webpack_require__(1), 48 | world = __webpack_require__(2); 49 | 50 | console.log(str.format('Hello {0}!', world.world)); 51 | 52 | /***/ }, 53 | /* 1 */ 54 | /***/ function(module, exports, __webpack_require__) { 55 | 56 | function format(string, obj) { 57 | var result = string; 58 | if (!(obj instanceof Object) || arguments.length > 2) { 59 | var args = []; 60 | for (var i = 1; i < arguments.length; i++) { 61 | args.push(arguments[i]); 62 | } 63 | obj = args; 64 | } 65 | for (var name in obj) { 66 | if (obj.hasOwnProperty(name)) { 67 | result = replaceToken(result, name, obj[name]); 68 | } 69 | } 70 | return result; 71 | } 72 | 73 | function replaceToken(string, tokenName, value) { 74 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 75 | if (string && pattern.test(string)) { 76 | string = string.replace(pattern, value); 77 | } 78 | return string 79 | } 80 | 81 | 82 | module.exports = { 83 | format: format 84 | }; 85 | 86 | /***/ }, 87 | /* 2 */ 88 | /***/ function(module, exports, __webpack_require__) { 89 | 90 | module.exports = { 91 | "world": "World" 92 | }; 93 | 94 | /***/ } 95 | /******/ ]) -------------------------------------------------------------------------------- /1_loaders/ex1_my_json_loader/web_loaders/my_json_loader.js: -------------------------------------------------------------------------------- 1 | function my_json_loader(source) { 2 | return 'module.exports = ' + source + ';'; 3 | } 4 | 5 | module.exports = my_json_loader; -------------------------------------------------------------------------------- /1_loaders/ex1_my_json_loader/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: { 3 | result: './js/app.js' 4 | }, 5 | output: { 6 | filename: '[name].js' 7 | }, 8 | module: { 9 | loaders: [ 10 | { test: /\.json$/, loader: 'my_json_loader' } 11 | ] 12 | } 13 | }; -------------------------------------------------------------------------------- /1_loaders/ex2_css_loader/css/app.css: -------------------------------------------------------------------------------- 1 | @import "./base.css"; 2 | 3 | .my-header { 4 | color: #f00; 5 | font-size: 30px; 6 | font-family: Verdana, Geneva, sans-serif; 7 | } -------------------------------------------------------------------------------- /1_loaders/ex2_css_loader/css/base.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } -------------------------------------------------------------------------------- /1_loaders/ex2_css_loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /1_loaders/ex2_css_loader/js/app.js: -------------------------------------------------------------------------------- 1 | var str = require('./str'), 2 | $ = require('jquery'); 3 | 4 | require('../css/app.css'); 5 | 6 | $('.js-my-div').text(str.format('Hello {0}!', 'World')); 7 | -------------------------------------------------------------------------------- /1_loaders/ex2_css_loader/js/str.js: -------------------------------------------------------------------------------- 1 | function format(string, obj) { 2 | var result = string; 3 | if (!(obj instanceof Object) || arguments.length > 2) { 4 | var args = []; 5 | for (var i = 1; i < arguments.length; i++) { 6 | args.push(arguments[i]); 7 | } 8 | obj = args; 9 | } 10 | for (var name in obj) { 11 | if (obj.hasOwnProperty(name)) { 12 | result = replaceToken(result, name, obj[name]); 13 | } 14 | } 15 | return result; 16 | } 17 | 18 | function replaceToken(string, tokenName, value) { 19 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 20 | if (string && pattern.test(string)) { 21 | string = string.replace(pattern, value); 22 | } 23 | return string 24 | } 25 | 26 | 27 | module.exports = { 28 | format: format 29 | }; -------------------------------------------------------------------------------- /1_loaders/ex2_css_loader/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ex2_css_loader", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "result.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "css-loader": "^0.12.1", 13 | "jquery": "^2.1.4", 14 | "style-loader": "^0.12.2" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /1_loaders/ex2_css_loader/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: { 3 | result: './js/app.js' 4 | }, 5 | output: { 6 | filename: '[name].js' 7 | }, 8 | module: { 9 | loaders: [ 10 | { test: /\.css$/, loader: 'style-loader!css-loader' } 11 | ] 12 | } 13 | }; -------------------------------------------------------------------------------- /1_loaders/ex3_url_loader/9ded4d336121a79467961c17bd063c4a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/erm0l0v/webpack_examples/b72459134c87c23db0f4a77a22664f8819b848b1/1_loaders/ex3_url_loader/9ded4d336121a79467961c17bd063c4a.jpg -------------------------------------------------------------------------------- /1_loaders/ex3_url_loader/css/app.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-image: url("../img/background.jpg"); 3 | background-size: cover; 4 | } 5 | 6 | .my-header { 7 | color: #f00; 8 | font-size: 30px; 9 | font-family: Verdana, Geneva, sans-serif; 10 | background-color: #fff; 11 | margin-left: 50%; 12 | } 13 | 14 | .my-header:before { 15 | content: ""; 16 | display: block; 17 | width: 120px; 18 | height: 120px; 19 | background-image: url("../img/icon.png"); 20 | } -------------------------------------------------------------------------------- /1_loaders/ex3_url_loader/img/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/erm0l0v/webpack_examples/b72459134c87c23db0f4a77a22664f8819b848b1/1_loaders/ex3_url_loader/img/background.jpg -------------------------------------------------------------------------------- /1_loaders/ex3_url_loader/img/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/erm0l0v/webpack_examples/b72459134c87c23db0f4a77a22664f8819b848b1/1_loaders/ex3_url_loader/img/icon.png -------------------------------------------------------------------------------- /1_loaders/ex3_url_loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /1_loaders/ex3_url_loader/js/app.js: -------------------------------------------------------------------------------- 1 | var str = require('./str'), 2 | $ = require('jquery'); 3 | 4 | require('../css/app.css'); 5 | 6 | $('.js-my-div').text(str.format('Click {0}!', 'Me')); 7 | -------------------------------------------------------------------------------- /1_loaders/ex3_url_loader/js/str.js: -------------------------------------------------------------------------------- 1 | function format(string, obj) { 2 | var result = string; 3 | if (!(obj instanceof Object) || arguments.length > 2) { 4 | var args = []; 5 | for (var i = 1; i < arguments.length; i++) { 6 | args.push(arguments[i]); 7 | } 8 | obj = args; 9 | } 10 | for (var name in obj) { 11 | if (obj.hasOwnProperty(name)) { 12 | result = replaceToken(result, name, obj[name]); 13 | } 14 | } 15 | return result; 16 | } 17 | 18 | function replaceToken(string, tokenName, value) { 19 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 20 | if (string && pattern.test(string)) { 21 | string = string.replace(pattern, value); 22 | } 23 | return string 24 | } 25 | 26 | 27 | module.exports = { 28 | format: format 29 | }; -------------------------------------------------------------------------------- /1_loaders/ex3_url_loader/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ex4_image_loader", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "result.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "css-loader": "^0.12.1", 13 | "jquery": "^2.1.4", 14 | "style-loader": "^0.12.2", 15 | "url-loader": "^0.5.5" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /1_loaders/ex3_url_loader/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: { 3 | result: './js/app.js' 4 | }, 5 | output: { 6 | filename: '[name].js' 7 | }, 8 | module: { 9 | loaders: [ 10 | { test: /\.css$/, loader: 'style-loader!css-loader' }, 11 | { test: /(\.jpe?g$|\.png$)/, loader: 'url-loader?limit=10000' } 12 | ] 13 | } 14 | }; -------------------------------------------------------------------------------- /1_loaders/ex4_image_loader/9ded4d336121a79467961c17bd063c4a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/erm0l0v/webpack_examples/b72459134c87c23db0f4a77a22664f8819b848b1/1_loaders/ex4_image_loader/9ded4d336121a79467961c17bd063c4a.jpg -------------------------------------------------------------------------------- /1_loaders/ex4_image_loader/css/app.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-image: url("../img/background.jpg"); 3 | background-size: cover; 4 | } 5 | 6 | .my-header { 7 | color: #f00; 8 | font-size: 30px; 9 | font-family: Verdana, Geneva, sans-serif; 10 | background-color: #fff; 11 | margin-left: 50%; 12 | } 13 | 14 | .my-header:before { 15 | content: ""; 16 | display: block; 17 | width: 120px; 18 | height: 120px; 19 | background-image: url("../img/icon.png"); 20 | } -------------------------------------------------------------------------------- /1_loaders/ex4_image_loader/img/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/erm0l0v/webpack_examples/b72459134c87c23db0f4a77a22664f8819b848b1/1_loaders/ex4_image_loader/img/background.jpg -------------------------------------------------------------------------------- /1_loaders/ex4_image_loader/img/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/erm0l0v/webpack_examples/b72459134c87c23db0f4a77a22664f8819b848b1/1_loaders/ex4_image_loader/img/icon.png -------------------------------------------------------------------------------- /1_loaders/ex4_image_loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /1_loaders/ex4_image_loader/js/app.js: -------------------------------------------------------------------------------- 1 | var str = require('./str'), 2 | $ = require('jquery'); 3 | 4 | require('../css/app.css'); 5 | 6 | $('.js-my-div').text(str.format('Click {0}!', 'Me')); 7 | -------------------------------------------------------------------------------- /1_loaders/ex4_image_loader/js/str.js: -------------------------------------------------------------------------------- 1 | function format(string, obj) { 2 | var result = string; 3 | if (!(obj instanceof Object) || arguments.length > 2) { 4 | var args = []; 5 | for (var i = 1; i < arguments.length; i++) { 6 | args.push(arguments[i]); 7 | } 8 | obj = args; 9 | } 10 | for (var name in obj) { 11 | if (obj.hasOwnProperty(name)) { 12 | result = replaceToken(result, name, obj[name]); 13 | } 14 | } 15 | return result; 16 | } 17 | 18 | function replaceToken(string, tokenName, value) { 19 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 20 | if (string && pattern.test(string)) { 21 | string = string.replace(pattern, value); 22 | } 23 | return string 24 | } 25 | 26 | 27 | module.exports = { 28 | format: format 29 | }; -------------------------------------------------------------------------------- /1_loaders/ex4_image_loader/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ex3_jquery_npm", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "result.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "css-loader": "^0.12.1", 13 | "image-webpack-loader": "^1.4.0", 14 | "imagemin": "^3.2.0", 15 | "jquery": "^2.1.4", 16 | "style-loader": "^0.12.2", 17 | "url-loader": "^0.5.5" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /1_loaders/ex4_image_loader/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: { 3 | result: './js/app.js' 4 | }, 5 | output: { 6 | filename: '[name].js' 7 | }, 8 | module: { 9 | loaders: [ 10 | { test: /\.css$/, loader: 'style-loader!css-loader' }, 11 | { test: /(\.jpe?g$|\.png$)/, 12 | loaders:[ 13 | 'url-loader?limit=10000', 14 | 'image-webpack?optimizationLevel=7&progressive=true' 15 | ]} 16 | ] 17 | } 18 | }; -------------------------------------------------------------------------------- /1_loaders/ex5_fonts_loader/fonts/font-icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/erm0l0v/webpack_examples/b72459134c87c23db0f4a77a22664f8819b848b1/1_loaders/ex5_fonts_loader/fonts/font-icons.eot -------------------------------------------------------------------------------- /1_loaders/ex5_fonts_loader/fonts/font-icons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /1_loaders/ex5_fonts_loader/fonts/font-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/erm0l0v/webpack_examples/b72459134c87c23db0f4a77a22664f8819b848b1/1_loaders/ex5_fonts_loader/fonts/font-icons.ttf -------------------------------------------------------------------------------- /1_loaders/ex5_fonts_loader/fonts/font-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/erm0l0v/webpack_examples/b72459134c87c23db0f4a77a22664f8819b848b1/1_loaders/ex5_fonts_loader/fonts/font-icons.woff -------------------------------------------------------------------------------- /1_loaders/ex5_fonts_loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /1_loaders/ex5_fonts_loader/js/app.js: -------------------------------------------------------------------------------- 1 | var str = require('./str'), 2 | $ = require('jquery'); 3 | 4 | require('../less/app.less'); 5 | 6 | for (var i = 0; i <= 10; i++) { 7 | $('.js-my-div').append(str.format('

', i)); 8 | } 9 | -------------------------------------------------------------------------------- /1_loaders/ex5_fonts_loader/js/str.js: -------------------------------------------------------------------------------- 1 | function format(string, obj) { 2 | var result = string; 3 | if (!(obj instanceof Object) || arguments.length > 2) { 4 | var args = []; 5 | for (var i = 1; i < arguments.length; i++) { 6 | args.push(arguments[i]); 7 | } 8 | obj = args; 9 | } 10 | for (var name in obj) { 11 | if (obj.hasOwnProperty(name)) { 12 | result = replaceToken(result, name, obj[name]); 13 | } 14 | } 15 | return result; 16 | } 17 | 18 | function replaceToken(string, tokenName, value) { 19 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 20 | if (string && pattern.test(string)) { 21 | string = string.replace(pattern, value); 22 | } 23 | return string 24 | } 25 | 26 | 27 | module.exports = { 28 | format: format 29 | }; -------------------------------------------------------------------------------- /1_loaders/ex5_fonts_loader/less/app.less: -------------------------------------------------------------------------------- 1 | @import "./ratings.less"; 2 | 3 | @option-color-star-active: #126f9a; 4 | @option-color-star: #d6dbe0; 5 | 6 | .star { 7 | .rating(@option-color-star-active, @option-color-star); 8 | } -------------------------------------------------------------------------------- /1_loaders/ex5_fonts_loader/less/ratings.less: -------------------------------------------------------------------------------- 1 | @import "./review_widget_fonts.less"; 2 | 3 | 4 | .rating(@color-star-active, @color-star) { 5 | position: relative; 6 | 7 | display: inline-block; 8 | width: 85px; 9 | height: 24px; 10 | 11 | vertical-align: middle; 12 | 13 | &:before, 14 | &:after { 15 | .review-widget-font-icon(); 16 | 17 | position: absolute; 18 | left: 1px; 19 | top: 1px; 20 | 21 | display: inline-block; 22 | 23 | font-size: 18px; 24 | } 25 | 26 | &:after { 27 | color: @color-star-active; 28 | } 29 | 30 | &:before { 31 | color: @color-star; 32 | content: %("%s%s%s%s%s", @review-widget-icon-star, @review-widget-icon-star, @review-widget-icon-star, @review-widget-icon-star, @review-widget-icon-star); 33 | } 34 | &--s0:after { 35 | content: ''; 36 | } 37 | &--s1:after { 38 | content: @review-widget-icon-half-star; 39 | } 40 | &--s2:after { 41 | content: @review-widget-icon-star; 42 | } 43 | &--s3:after { 44 | content: %("%s%s", @review-widget-icon-star, @review-widget-icon-half-star); 45 | } 46 | &--s4:after { 47 | content: %("%s%s", @review-widget-icon-star, @review-widget-icon-star); 48 | } 49 | &--s5:after { 50 | content: %("%s%s%s", @review-widget-icon-star, @review-widget-icon-star, @review-widget-icon-half-star); 51 | } 52 | &--s6:after { 53 | content: %("%s%s%s", @review-widget-icon-star, @review-widget-icon-star, @review-widget-icon-star); 54 | } 55 | &--s7:after { 56 | content: %("%s%s%s%s", @review-widget-icon-star, @review-widget-icon-star, @review-widget-icon-star, @review-widget-icon-half-star); 57 | } 58 | &--s8:after { 59 | content: %("%s%s%s%s", @review-widget-icon-star, @review-widget-icon-star, @review-widget-icon-star, @review-widget-icon-star); 60 | } 61 | &--s9:after { 62 | content: %("%s%s%s%s%s", @review-widget-icon-star, @review-widget-icon-star, @review-widget-icon-star, @review-widget-icon-star, @review-widget-icon-half-star); 63 | } 64 | &--s10:after { 65 | content: %("%s%s%s%s%s", @review-widget-icon-star, @review-widget-icon-star, @review-widget-icon-star, @review-widget-icon-star, @review-widget-icon-star); 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /1_loaders/ex5_fonts_loader/less/review_widget_fonts.less: -------------------------------------------------------------------------------- 1 | @review-widget-icon-spinner: "\f110"; 2 | @review-widget-icon-pencil: "\f040"; 3 | @review-widget-icon-half-star: "\f089"; 4 | @review-widget-icon-star: "\f005"; 5 | @review-widget-icon-facebook: "\f09a"; 6 | @review-widget-icon-linkedin: "\f0e1"; 7 | 8 | @font-face { 9 | font-family: 'CT-Review-Widget-Fonts'; 10 | font-weight: normal; 11 | font-style: normal; 12 | 13 | src: url('../fonts/font-icons.eot'); 14 | src: url('../fonts/font-icons.eot') format('embedded-opentype'), 15 | url('../fonts/font-icons.woff') format('woff'), 16 | url('../fonts/font-icons.ttf') format('truetype'), 17 | url('../fonts/font-icons.svg') format('svg'); 18 | } 19 | 20 | .review-widget-font-icon () { 21 | font-family: 'CT-Review-Widget-Fonts', FontAwesome; 22 | font-weight: normal; 23 | font-style: normal; 24 | line-height: 1; 25 | } -------------------------------------------------------------------------------- /1_loaders/ex5_fonts_loader/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ex5_fonts_loader", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "result.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "css-loader": "^0.12.1", 13 | "file-loader": "^0.8.1", 14 | "jquery": "^2.1.4", 15 | "less": "^2.5.0", 16 | "less-loader": "^2.2.0", 17 | "style-loader": "^0.12.2", 18 | "url-loader": "^0.5.5" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /1_loaders/ex5_fonts_loader/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: { 3 | result: './js/app.js' 4 | }, 5 | output: { 6 | filename: '[name].js' 7 | }, 8 | module: { 9 | loaders: [ 10 | { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, 11 | { test: /(\.eot$|\.svg$|\.ttf$|\.woff$)/, loader: 'url-loader?limit=10000' } 12 | ] 13 | } 14 | }; -------------------------------------------------------------------------------- /1_loaders/ex6_preloaders/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /1_loaders/ex6_preloaders/js/app.js: -------------------------------------------------------------------------------- 1 | var str = require('./str'); 2 | 3 | console.log(str.format('Hello {0}!', 'World')); -------------------------------------------------------------------------------- /1_loaders/ex6_preloaders/js/str.js: -------------------------------------------------------------------------------- 1 | function format(string, obj) { 2 | var result = string; 3 | if (!(obj instanceof Object) || arguments.length > 2) { 4 | var args = []; 5 | for (var i = 1; i < arguments.length; i++) { 6 | args.push(arguments[i]); 7 | } 8 | obj = args; 9 | } 10 | for (var name in obj) { 11 | if (obj.hasOwnProperty(name)) { 12 | result = replaceToken(result, name, obj[name]); 13 | } 14 | } 15 | return result; 16 | } 17 | 18 | function replaceToken(string, tokenName, value) { 19 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 20 | if (string && pattern.test(string)) { 21 | string = string.replace(pattern, value); 22 | } 23 | return string 24 | } 25 | 26 | 27 | module.exports = { 28 | format: format 29 | }; -------------------------------------------------------------------------------- /1_loaders/ex6_preloaders/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ex6_preloaders", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "result.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "jshint": "^2.7.0", 13 | "jshint-loader": "^0.8.3" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /1_loaders/ex6_preloaders/result.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 | var str = __webpack_require__(1); 48 | 49 | console.log(str.format('Hello {0}!', 'World')); 50 | 51 | /***/ }, 52 | /* 1 */ 53 | /***/ function(module, exports, __webpack_require__) { 54 | 55 | function format(string, obj) { 56 | var result = string; 57 | if (!(obj instanceof Object) || arguments.length > 2) { 58 | var args = []; 59 | for (var i = 1; i < arguments.length; i++) { 60 | args.push(arguments[i]); 61 | } 62 | obj = args; 63 | } 64 | for (var name in obj) { 65 | if (obj.hasOwnProperty(name)) { 66 | result = replaceToken(result, name, obj[name]); 67 | } 68 | } 69 | return result; 70 | } 71 | 72 | function replaceToken(string, tokenName, value) { 73 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 74 | if (string && pattern.test(string)) { 75 | string = string.replace(pattern, value); 76 | } 77 | return string 78 | } 79 | 80 | 81 | module.exports = { 82 | format: format 83 | }; 84 | 85 | /***/ } 86 | /******/ ]) -------------------------------------------------------------------------------- /1_loaders/ex6_preloaders/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: { 3 | result: './js/app.js' 4 | }, 5 | output: { 6 | filename: '[name].js' 7 | }, 8 | module: { 9 | preLoaders: [ 10 | { 11 | test: /\.js$/, 12 | exclude: /node_modules/, 13 | loader: "jshint-loader" 14 | } 15 | ] 16 | } 17 | }; -------------------------------------------------------------------------------- /1_loaders/ex7_postloaders/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /1_loaders/ex7_postloaders/js/app.js: -------------------------------------------------------------------------------- 1 | var str = require('./str'); 2 | 3 | var sayHello = str.format.bind(null, 'Hello {0}!'); 4 | 5 | console.log(sayHello('World')); -------------------------------------------------------------------------------- /1_loaders/ex7_postloaders/js/str.js: -------------------------------------------------------------------------------- 1 | function format(string, obj) { 2 | var result = string; 3 | if (!(obj instanceof Object) || arguments.length > 2) { 4 | var args = []; 5 | for (var i = 1; i < arguments.length; i++) { 6 | args.push(arguments[i]); 7 | } 8 | obj = args; 9 | } 10 | for (var name in obj) { 11 | if (obj.hasOwnProperty(name)) { 12 | result = replaceToken(result, name, obj[name]); 13 | } 14 | } 15 | return result; 16 | } 17 | 18 | function replaceToken(string, tokenName, value) { 19 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 20 | if (string && pattern.test(string)) { 21 | string = string.replace(pattern, value); 22 | } 23 | return string 24 | } 25 | 26 | 27 | module.exports = { 28 | format: format 29 | }; -------------------------------------------------------------------------------- /1_loaders/ex7_postloaders/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ex7_postloaders", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "result.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "autopolyfiller-loader": "^0.3.2", 13 | "node-libs-browser": "^0.5.0", 14 | "webpack": "^1.9.7" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /1_loaders/ex7_postloaders/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: { 3 | result: './js/app.js' 4 | }, 5 | output: { 6 | filename: '[name].js' 7 | }, 8 | module: { 9 | postLoaders: [ { 10 | test: /\.js$/, 11 | exclude: /\/(node_modules|bower_components)\//, 12 | loader: 'autopolyfiller-loader', 13 | query: { browsers: [ 'last 2 versions', 'ie >= 8' ] } 14 | } ] 15 | } 16 | }; -------------------------------------------------------------------------------- /2_plugins/ex0_my_plugin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /2_plugins/ex0_my_plugin/js/app.js: -------------------------------------------------------------------------------- 1 | var str = require('./str'); 2 | 3 | console.log(str.format('Hello {0}!', 'World')); -------------------------------------------------------------------------------- /2_plugins/ex0_my_plugin/js/str.js: -------------------------------------------------------------------------------- 1 | function format(string, obj) { 2 | var result = string; 3 | if (!(obj instanceof Object) || arguments.length > 2) { 4 | var args = []; 5 | for (var i = 1; i < arguments.length; i++) { 6 | args.push(arguments[i]); 7 | } 8 | obj = args; 9 | } 10 | for (var name in obj) { 11 | if (obj.hasOwnProperty(name)) { 12 | result = replaceToken(result, name, obj[name]); 13 | } 14 | } 15 | return result; 16 | } 17 | 18 | function replaceToken(string, tokenName, value) { 19 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 20 | if (string && pattern.test(string)) { 21 | string = string.replace(pattern, value); 22 | } 23 | return string 24 | } 25 | 26 | 27 | module.exports = { 28 | format: format 29 | }; -------------------------------------------------------------------------------- /2_plugins/ex0_my_plugin/plugins/MyPlugin.js: -------------------------------------------------------------------------------- 1 | function logEvent (compiler, eventName) { 2 | compiler.plugin(eventName, function() { 3 | console.log('MyMyPlugin - ' + eventName); 4 | }); 5 | } 6 | 7 | function MyPlugin() { 8 | 9 | } 10 | 11 | MyPlugin.prototype.apply = function(compiler) { 12 | var log = logEvent.bind(null, compiler); 13 | log('watch-run'); 14 | log('compilation'); 15 | log('normal-module-factory'); 16 | log('context-module-factory'); 17 | log('compile'); 18 | log('done'); 19 | log('failed'); 20 | log('invalid'); 21 | log('after-plugins'); 22 | log('after-resolvers'); 23 | }; 24 | 25 | module.exports = MyPlugin; -------------------------------------------------------------------------------- /2_plugins/ex0_my_plugin/result.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 | var str = __webpack_require__(1); 48 | 49 | console.log(str.format('Hello {0}!', 'World')); 50 | 51 | /***/ }, 52 | /* 1 */ 53 | /***/ function(module, exports, __webpack_require__) { 54 | 55 | function format(string, obj) { 56 | var result = string; 57 | if (!(obj instanceof Object) || arguments.length > 2) { 58 | var args = []; 59 | for (var i = 1; i < arguments.length; i++) { 60 | args.push(arguments[i]); 61 | } 62 | obj = args; 63 | } 64 | for (var name in obj) { 65 | if (obj.hasOwnProperty(name)) { 66 | result = replaceToken(result, name, obj[name]); 67 | } 68 | } 69 | return result; 70 | } 71 | 72 | function replaceToken(string, tokenName, value) { 73 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 74 | if (string && pattern.test(string)) { 75 | string = string.replace(pattern, value); 76 | } 77 | return string 78 | } 79 | 80 | 81 | module.exports = { 82 | format: format 83 | }; 84 | 85 | /***/ } 86 | /******/ ]) -------------------------------------------------------------------------------- /2_plugins/ex0_my_plugin/webpack.config.js: -------------------------------------------------------------------------------- 1 | var MyPlugin = require('./plugins/MyPlugin'); 2 | 3 | module.exports = { 4 | entry: { 5 | result: './js/app.js' 6 | }, 7 | output: { 8 | filename: '[name].js' 9 | }, 10 | plugins: [ 11 | new MyPlugin() 12 | ] 13 | }; -------------------------------------------------------------------------------- /2_plugins/ex1_notify/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /2_plugins/ex1_notify/js/app.js: -------------------------------------------------------------------------------- 1 | var str = require('./str'); 2 | 3 | console.log(str.format('Hello {0}!', 'World')); -------------------------------------------------------------------------------- /2_plugins/ex1_notify/js/str.js: -------------------------------------------------------------------------------- 1 | function format(string, obj) { 2 | var result = string; 3 | if (!(obj instanceof Object) || arguments.length > 2) { 4 | var args = []; 5 | for (var i = 1; i < arguments.length; i++) { 6 | args.push(arguments[i]); 7 | } 8 | obj = args; 9 | } 10 | for (var name in obj) { 11 | if (obj.hasOwnProperty(name)) { 12 | result = replaceToken(result, name, obj[name]); 13 | } 14 | } 15 | return result; 16 | } 17 | 18 | function replaceToken(string, tokenName, value) { 19 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 20 | if (string && pattern.test(string)) { 21 | string = string.replace(pattern, value); 22 | } 23 | return string 24 | } 25 | 26 | 27 | module.exports = { 28 | format: format 29 | }; -------------------------------------------------------------------------------- /2_plugins/ex1_notify/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ex1_notify", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "result.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "jshint": "^2.7.0", 13 | "jshint-loader": "^0.8.3", 14 | "node-notifier": "^4.2.1" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /2_plugins/ex1_notify/plugins/WebpackNotify.js: -------------------------------------------------------------------------------- 1 | var path = require('path'), 2 | notifier = require('node-notifier'); 3 | 4 | var logos = { 5 | error: path.join(__dirname, 'webpack_error.png'), 6 | warning: path.join(__dirname, 'webpack_warning.png'), 7 | ok: path.join(__dirname, 'webpack_ok.png') 8 | }; 9 | 10 | function toMessage(error) { 11 | var result = { 12 | message: "", 13 | title: "" 14 | }; 15 | if (error.module && error.module.rawRequest) 16 | result.title = error.module.rawRequest; 17 | 18 | if (error.error) 19 | result.message += error.error.toString(); 20 | else if (error.warning) 21 | result.message += error.warning.toString(); 22 | 23 | return result; 24 | } 25 | 26 | function WebpackNotify () { 27 | this.successIsLastMessage = false; 28 | } 29 | 30 | WebpackNotify.prototype.apply = function(compiler) { 31 | compiler.plugin('done', this.handleDone.bind(this)); 32 | }; 33 | 34 | WebpackNotify.prototype.handleDone = function (stats) { 35 | var success = true; 36 | if (stats.hasErrors()) { 37 | stats.compilation.errors.map(toMessage).forEach(function (msg) { 38 | var title = 'Webpack: Error'; 39 | if (msg.title) { 40 | title += ' in: ' + msg.title 41 | } 42 | this.notify({ 43 | title: title, 44 | message: msg.message, 45 | icon: logos.error 46 | }); 47 | }.bind(this)); 48 | success = false; 49 | this.successIsLastMessage = false; 50 | } 51 | if (stats.hasWarnings()) { 52 | stats.compilation.warnings.map(toMessage).forEach(function (msg) { 53 | var title = 'Webpack: Warning'; 54 | if (msg.title) { 55 | title += ' in: ' + msg.title 56 | } 57 | this.notify({ 58 | title: title, 59 | message: msg.message, 60 | icon: logos.warning 61 | }); 62 | }.bind(this)); 63 | success = false; 64 | this.successIsLastMessage = false; 65 | } 66 | if (success && !this.successIsLastMessage) { 67 | this.notify({ 68 | title: 'Webpack: Success', 69 | message: 'Good job, Boss', 70 | icon: logos.ok 71 | }); 72 | this.successIsLastMessage = true; 73 | } 74 | }; 75 | 76 | WebpackNotify.prototype.notify = function (message) { 77 | notifier.notify(message); 78 | }; 79 | 80 | 81 | module.exports = WebpackNotify; -------------------------------------------------------------------------------- /2_plugins/ex1_notify/plugins/webpack_error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/erm0l0v/webpack_examples/b72459134c87c23db0f4a77a22664f8819b848b1/2_plugins/ex1_notify/plugins/webpack_error.png -------------------------------------------------------------------------------- /2_plugins/ex1_notify/plugins/webpack_ok.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/erm0l0v/webpack_examples/b72459134c87c23db0f4a77a22664f8819b848b1/2_plugins/ex1_notify/plugins/webpack_ok.png -------------------------------------------------------------------------------- /2_plugins/ex1_notify/plugins/webpack_warning.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/erm0l0v/webpack_examples/b72459134c87c23db0f4a77a22664f8819b848b1/2_plugins/ex1_notify/plugins/webpack_warning.png -------------------------------------------------------------------------------- /2_plugins/ex1_notify/result.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 | var str = __webpack_require__(1); 48 | 49 | console.log(str.format('Hello {0}!', 'World')); 50 | 51 | /***/ }, 52 | /* 1 */ 53 | /***/ function(module, exports, __webpack_require__) { 54 | 55 | function format(string, obj) { 56 | var result = string; 57 | if (!(obj instanceof Object) || arguments.length > 2) { 58 | var args = []; 59 | for (var i = 1; i < arguments.length; i++) { 60 | args.push(arguments[i]); 61 | } 62 | obj = args; 63 | } 64 | for (var name in obj) { 65 | if (obj.hasOwnProperty(name)) { 66 | result = replaceToken(result, name, obj[name]); 67 | } 68 | } 69 | return result; 70 | } 71 | 72 | function replaceToken(string, tokenName, value) { 73 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 74 | if (string && pattern.test(string)) { 75 | string = string.replace(pattern, value); 76 | } 77 | return string 78 | } 79 | 80 | 81 | module.exports = { 82 | format: format 83 | }; 84 | 85 | /***/ } 86 | /******/ ]) -------------------------------------------------------------------------------- /2_plugins/ex1_notify/webpack.config.js: -------------------------------------------------------------------------------- 1 | var WebpackNotify = require('./plugins/WebpackNotify'); 2 | 3 | module.exports = { 4 | entry: { 5 | result: './js/app.js' 6 | }, 7 | output: { 8 | filename: '[name].js' 9 | }, 10 | module: { 11 | preLoaders: [ 12 | { 13 | test: /\.js$/, 14 | exclude: /node_modules/, 15 | loader: "jshint-loader" 16 | } 17 | ] 18 | }, 19 | plugins: [ 20 | new WebpackNotify() 21 | ] 22 | }; -------------------------------------------------------------------------------- /2_plugins/ex2_define_plugin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /2_plugins/ex2_define_plugin/js/app.js: -------------------------------------------------------------------------------- 1 | var str = require('./str'); 2 | 3 | console.log(str.format('Hello {0}!', NAME)); -------------------------------------------------------------------------------- /2_plugins/ex2_define_plugin/js/str.js: -------------------------------------------------------------------------------- 1 | function format(string, obj) { 2 | var result = string; 3 | if (!(obj instanceof Object) || arguments.length > 2) { 4 | var args = []; 5 | for (var i = 1; i < arguments.length; i++) { 6 | args.push(arguments[i]); 7 | } 8 | obj = args; 9 | } 10 | for (var name in obj) { 11 | if (obj.hasOwnProperty(name)) { 12 | result = replaceToken(result, name, obj[name]); 13 | } 14 | } 15 | return result; 16 | } 17 | 18 | function replaceToken(string, tokenName, value) { 19 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 20 | if (string && pattern.test(string)) { 21 | string = string.replace(pattern, value); 22 | } 23 | return string 24 | } 25 | 26 | 27 | module.exports = { 28 | format: format 29 | }; -------------------------------------------------------------------------------- /2_plugins/ex2_define_plugin/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ex2_define_plugin", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "result.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "node-libs-browser": "^0.5.0", 13 | "webpack": "^1.9.7" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /2_plugins/ex2_define_plugin/result.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 | var str = __webpack_require__(1); 48 | 49 | console.log(str.format('Hello {0}!', ("Kirill"))); 50 | 51 | /***/ }, 52 | /* 1 */ 53 | /***/ function(module, exports, __webpack_require__) { 54 | 55 | function format(string, obj) { 56 | var result = string; 57 | if (!(obj instanceof Object) || arguments.length > 2) { 58 | var args = []; 59 | for (var i = 1; i < arguments.length; i++) { 60 | args.push(arguments[i]); 61 | } 62 | obj = args; 63 | } 64 | for (var name in obj) { 65 | if (obj.hasOwnProperty(name)) { 66 | result = replaceToken(result, name, obj[name]); 67 | } 68 | } 69 | return result; 70 | } 71 | 72 | function replaceToken(string, tokenName, value) { 73 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 74 | if (string && pattern.test(string)) { 75 | string = string.replace(pattern, value); 76 | } 77 | return string 78 | } 79 | 80 | 81 | module.exports = { 82 | format: format 83 | }; 84 | 85 | /***/ } 86 | /******/ ]); -------------------------------------------------------------------------------- /2_plugins/ex2_define_plugin/webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | 3 | module.exports = { 4 | entry: { 5 | result: './js/app.js' 6 | }, 7 | output: { 8 | filename: '[name].js' 9 | }, 10 | plugins: [ 11 | new webpack.DefinePlugin({ 12 | NAME: JSON.stringify("Kirill") 13 | }) 14 | ] 15 | }; -------------------------------------------------------------------------------- /2_plugins/ex3_extract_text/fonts/font-icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/erm0l0v/webpack_examples/b72459134c87c23db0f4a77a22664f8819b848b1/2_plugins/ex3_extract_text/fonts/font-icons.eot -------------------------------------------------------------------------------- /2_plugins/ex3_extract_text/fonts/font-icons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /2_plugins/ex3_extract_text/fonts/font-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/erm0l0v/webpack_examples/b72459134c87c23db0f4a77a22664f8819b848b1/2_plugins/ex3_extract_text/fonts/font-icons.ttf -------------------------------------------------------------------------------- /2_plugins/ex3_extract_text/fonts/font-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/erm0l0v/webpack_examples/b72459134c87c23db0f4a77a22664f8819b848b1/2_plugins/ex3_extract_text/fonts/font-icons.woff -------------------------------------------------------------------------------- /2_plugins/ex3_extract_text/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /2_plugins/ex3_extract_text/js/app.js: -------------------------------------------------------------------------------- 1 | var str = require('./str'), 2 | $ = require('jquery'); 3 | 4 | require('../less/app.less'); 5 | 6 | for (var i = 0; i <= 10; i++) { 7 | $('.js-my-div').append(str.format('

', i)); 8 | } 9 | -------------------------------------------------------------------------------- /2_plugins/ex3_extract_text/js/str.js: -------------------------------------------------------------------------------- 1 | function format(string, obj) { 2 | var result = string; 3 | if (!(obj instanceof Object) || arguments.length > 2) { 4 | var args = []; 5 | for (var i = 1; i < arguments.length; i++) { 6 | args.push(arguments[i]); 7 | } 8 | obj = args; 9 | } 10 | for (var name in obj) { 11 | if (obj.hasOwnProperty(name)) { 12 | result = replaceToken(result, name, obj[name]); 13 | } 14 | } 15 | return result; 16 | } 17 | 18 | function replaceToken(string, tokenName, value) { 19 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 20 | if (string && pattern.test(string)) { 21 | string = string.replace(pattern, value); 22 | } 23 | return string 24 | } 25 | 26 | 27 | module.exports = { 28 | format: format 29 | }; -------------------------------------------------------------------------------- /2_plugins/ex3_extract_text/less/app.less: -------------------------------------------------------------------------------- 1 | @import "./ratings.less"; 2 | 3 | @option-color-star-active: #126f9a; 4 | @option-color-star: #d6dbe0; 5 | 6 | .star { 7 | .rating(@option-color-star-active, @option-color-star); 8 | } -------------------------------------------------------------------------------- /2_plugins/ex3_extract_text/less/ratings.less: -------------------------------------------------------------------------------- 1 | @import "./review_widget_fonts.less"; 2 | 3 | 4 | .rating(@color-star-active, @color-star) { 5 | position: relative; 6 | 7 | display: inline-block; 8 | width: 85px; 9 | height: 24px; 10 | 11 | vertical-align: middle; 12 | 13 | &:before, 14 | &:after { 15 | .review-widget-font-icon(); 16 | 17 | position: absolute; 18 | left: 1px; 19 | top: 1px; 20 | 21 | display: inline-block; 22 | 23 | font-size: 18px; 24 | } 25 | 26 | &:after { 27 | color: @color-star-active; 28 | } 29 | 30 | &:before { 31 | color: @color-star; 32 | content: %("%s%s%s%s%s", @review-widget-icon-star, @review-widget-icon-star, @review-widget-icon-star, @review-widget-icon-star, @review-widget-icon-star); 33 | } 34 | &--s0:after { 35 | content: ''; 36 | } 37 | &--s1:after { 38 | content: @review-widget-icon-half-star; 39 | } 40 | &--s2:after { 41 | content: @review-widget-icon-star; 42 | } 43 | &--s3:after { 44 | content: %("%s%s", @review-widget-icon-star, @review-widget-icon-half-star); 45 | } 46 | &--s4:after { 47 | content: %("%s%s", @review-widget-icon-star, @review-widget-icon-star); 48 | } 49 | &--s5:after { 50 | content: %("%s%s%s", @review-widget-icon-star, @review-widget-icon-star, @review-widget-icon-half-star); 51 | } 52 | &--s6:after { 53 | content: %("%s%s%s", @review-widget-icon-star, @review-widget-icon-star, @review-widget-icon-star); 54 | } 55 | &--s7:after { 56 | content: %("%s%s%s%s", @review-widget-icon-star, @review-widget-icon-star, @review-widget-icon-star, @review-widget-icon-half-star); 57 | } 58 | &--s8:after { 59 | content: %("%s%s%s%s", @review-widget-icon-star, @review-widget-icon-star, @review-widget-icon-star, @review-widget-icon-star); 60 | } 61 | &--s9:after { 62 | content: %("%s%s%s%s%s", @review-widget-icon-star, @review-widget-icon-star, @review-widget-icon-star, @review-widget-icon-star, @review-widget-icon-half-star); 63 | } 64 | &--s10:after { 65 | content: %("%s%s%s%s%s", @review-widget-icon-star, @review-widget-icon-star, @review-widget-icon-star, @review-widget-icon-star, @review-widget-icon-star); 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /2_plugins/ex3_extract_text/less/review_widget_fonts.less: -------------------------------------------------------------------------------- 1 | @review-widget-icon-spinner: "\f110"; 2 | @review-widget-icon-pencil: "\f040"; 3 | @review-widget-icon-half-star: "\f089"; 4 | @review-widget-icon-star: "\f005"; 5 | @review-widget-icon-facebook: "\f09a"; 6 | @review-widget-icon-linkedin: "\f0e1"; 7 | 8 | @font-face { 9 | font-family: 'CT-Review-Widget-Fonts'; 10 | font-weight: normal; 11 | font-style: normal; 12 | 13 | src: url('../fonts/font-icons.eot'); 14 | src: url('../fonts/font-icons.eot') format('embedded-opentype'), 15 | url('../fonts/font-icons.woff') format('woff'), 16 | url('../fonts/font-icons.ttf') format('truetype'), 17 | url('../fonts/font-icons.svg') format('svg'); 18 | } 19 | 20 | .review-widget-font-icon () { 21 | font-family: 'CT-Review-Widget-Fonts', FontAwesome; 22 | font-weight: normal; 23 | font-style: normal; 24 | line-height: 1; 25 | } -------------------------------------------------------------------------------- /2_plugins/ex3_extract_text/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ex3_extract_text", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "result.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "css-loader": "^0.12.1", 13 | "extract-text-webpack-plugin": "^0.8.0", 14 | "file-loader": "^0.8.1", 15 | "jquery": "^2.1.4", 16 | "less": "^2.5.0", 17 | "less-loader": "^2.2.0", 18 | "node-libs-browser": "^0.5.0", 19 | "style-loader": "^0.12.2", 20 | "url-loader": "^0.5.5", 21 | "webpack": "^1.9.7" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /2_plugins/ex3_extract_text/webpack.config.js: -------------------------------------------------------------------------------- 1 | var ExtractTextPlugin = require("extract-text-webpack-plugin"); 2 | 3 | module.exports = { 4 | entry: { 5 | result: './js/app.js' 6 | }, 7 | output: { 8 | filename: '[name].js' 9 | }, 10 | module: { 11 | loaders: [ 12 | { test: /\.less$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader') }, 13 | { test: /(\.eot$|\.svg$|\.ttf$|\.woff$)/, loader: 'url-loader?limit=10000' } 14 | ] 15 | }, 16 | plugins: [ 17 | new ExtractTextPlugin("[name].css") 18 | ] 19 | }; -------------------------------------------------------------------------------- /2_plugins/ex4_deduplication/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /2_plugins/ex4_deduplication/js/app.js: -------------------------------------------------------------------------------- 1 | var str = require('./str'), 2 | str2 = require('./str2'); 3 | 4 | console.log(str.format('Hello {0}!', 'str')); 5 | console.log(str.format('Hello {0}!', 'str2')); -------------------------------------------------------------------------------- /2_plugins/ex4_deduplication/js/str.js: -------------------------------------------------------------------------------- 1 | function format(string, obj) { 2 | var result = string; 3 | if (!(obj instanceof Object) || arguments.length > 2) { 4 | var args = []; 5 | for (var i = 1; i < arguments.length; i++) { 6 | args.push(arguments[i]); 7 | } 8 | obj = args; 9 | } 10 | for (var name in obj) { 11 | if (obj.hasOwnProperty(name)) { 12 | result = replaceToken(result, name, obj[name]); 13 | } 14 | } 15 | return result; 16 | } 17 | 18 | function replaceToken(string, tokenName, value) { 19 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 20 | if (string && pattern.test(string)) { 21 | string = string.replace(pattern, value); 22 | } 23 | return string 24 | } 25 | 26 | 27 | module.exports = { 28 | format: format 29 | }; -------------------------------------------------------------------------------- /2_plugins/ex4_deduplication/js/str2.js: -------------------------------------------------------------------------------- 1 | function format(string, obj) { 2 | var result = string; 3 | if (!(obj instanceof Object) || arguments.length > 2) { 4 | var args = []; 5 | for (var i = 1; i < arguments.length; i++) { 6 | args.push(arguments[i]); 7 | } 8 | obj = args; 9 | } 10 | for (var name in obj) { 11 | if (obj.hasOwnProperty(name)) { 12 | result = replaceToken(result, name, obj[name]); 13 | } 14 | } 15 | return result; 16 | } 17 | 18 | function replaceToken(string, tokenName, value) { 19 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 20 | if (string && pattern.test(string)) { 21 | string = string.replace(pattern, value); 22 | } 23 | return string 24 | } 25 | 26 | 27 | module.exports = { 28 | format: format 29 | }; -------------------------------------------------------------------------------- /2_plugins/ex4_deduplication/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ex4_deduplication", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "result.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "node-libs-browser": "^0.5.0", 13 | "webpack": "^1.9.7" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /2_plugins/ex4_deduplication/result.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 "number": 49 | // Module is a copy of another module 50 | modules[i] = modules[modules[i]]; 51 | break; 52 | case "object": 53 | // Module can be created from a template 54 | modules[i] = (function(_m) { 55 | var args = _m.slice(1), fn = modules[_m[0]]; 56 | return function (a,b,c) { 57 | fn.apply(null, [a,b,c].concat(args)); 58 | }; 59 | }(modules[i])); 60 | } 61 | } 62 | } 63 | return modules; 64 | }([ 65 | /* 0 */ 66 | /***/ function(module, exports, __webpack_require__) { 67 | 68 | var str = __webpack_require__(1), 69 | str2 = __webpack_require__(2); 70 | 71 | console.log(str.format('Hello {0}!', 'str')); 72 | console.log(str.format('Hello {0}!', 'str2')); 73 | 74 | /***/ }, 75 | /* 1 */ 76 | /***/ function(module, exports, __webpack_require__) { 77 | 78 | function format(string, obj) { 79 | var result = string; 80 | if (!(obj instanceof Object) || arguments.length > 2) { 81 | var args = []; 82 | for (var i = 1; i < arguments.length; i++) { 83 | args.push(arguments[i]); 84 | } 85 | obj = args; 86 | } 87 | for (var name in obj) { 88 | if (obj.hasOwnProperty(name)) { 89 | result = replaceToken(result, name, obj[name]); 90 | } 91 | } 92 | return result; 93 | } 94 | 95 | function replaceToken(string, tokenName, value) { 96 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 97 | if (string && pattern.test(string)) { 98 | string = string.replace(pattern, value); 99 | } 100 | return string 101 | } 102 | 103 | 104 | module.exports = { 105 | format: format 106 | }; 107 | 108 | /***/ }, 109 | /* 2 */ 110 | 1 111 | /******/ ]))); -------------------------------------------------------------------------------- /2_plugins/ex4_deduplication/webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | 3 | module.exports = { 4 | entry: { 5 | result: './js/app.js' 6 | }, 7 | output: { 8 | filename: '[name].js' 9 | }, 10 | plugins: [ 11 | new webpack.optimize.DedupePlugin() 12 | ] 13 | }; -------------------------------------------------------------------------------- /2_plugins/ex5_stats/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /2_plugins/ex5_stats/js/app.js: -------------------------------------------------------------------------------- 1 | var str = require('./str'); 2 | 3 | console.log(str.format('Hello {0}!', 'World')); -------------------------------------------------------------------------------- /2_plugins/ex5_stats/js/str.js: -------------------------------------------------------------------------------- 1 | function format(string, obj) { 2 | var result = string; 3 | if (!(obj instanceof Object) || arguments.length > 2) { 4 | var args = []; 5 | for (var i = 1; i < arguments.length; i++) { 6 | args.push(arguments[i]); 7 | } 8 | obj = args; 9 | } 10 | for (var name in obj) { 11 | if (obj.hasOwnProperty(name)) { 12 | result = replaceToken(result, name, obj[name]); 13 | } 14 | } 15 | return result; 16 | } 17 | 18 | function replaceToken(string, tokenName, value) { 19 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 20 | if (string && pattern.test(string)) { 21 | string = string.replace(pattern, value); 22 | } 23 | return string 24 | } 25 | 26 | 27 | module.exports = { 28 | format: format 29 | }; -------------------------------------------------------------------------------- /2_plugins/ex5_stats/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ex5_stats", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "result.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "node-libs-browser": "^0.5.0", 13 | "stats-webpack-plugin": "^0.1.0", 14 | "webpack": "^1.9.7" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /2_plugins/ex5_stats/result.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 | var str = __webpack_require__(1); 48 | 49 | console.log(str.format('Hello {0}!', 'World')); 50 | 51 | /***/ }, 52 | /* 1 */ 53 | /***/ function(module, exports, __webpack_require__) { 54 | 55 | function format(string, obj) { 56 | var result = string; 57 | if (!(obj instanceof Object) || arguments.length > 2) { 58 | var args = []; 59 | for (var i = 1; i < arguments.length; i++) { 60 | args.push(arguments[i]); 61 | } 62 | obj = args; 63 | } 64 | for (var name in obj) { 65 | if (obj.hasOwnProperty(name)) { 66 | result = replaceToken(result, name, obj[name]); 67 | } 68 | } 69 | return result; 70 | } 71 | 72 | function replaceToken(string, tokenName, value) { 73 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 74 | if (string && pattern.test(string)) { 75 | string = string.replace(pattern, value); 76 | } 77 | return string 78 | } 79 | 80 | 81 | module.exports = { 82 | format: format 83 | }; 84 | 85 | /***/ } 86 | /******/ ]); -------------------------------------------------------------------------------- /2_plugins/ex5_stats/stats.json: -------------------------------------------------------------------------------- 1 | {"errors":[],"warnings":[],"version":"1.9.7","hash":"c06ee771d1ba570975d8","time":46,"publicPath":"","assetsByChunkName":{"result":"result.js"},"assets":[{"name":"result.js","size":2304,"chunks":[0],"chunkNames":["result"],"emitted":true}],"chunks":[{"id":0,"rendered":true,"initial":true,"entry":true,"extraAsync":false,"size":787,"names":["result"],"files":["result.js"],"hash":"ee36eb80ec5f89bf109e","parents":[],"origins":[{"moduleId":0,"module":"/Users/kej/sourse/github/webpack_examples/2_plugins/ex5_stats/js/app.js","moduleIdentifier":"/Users/kej/sourse/github/webpack_examples/2_plugins/ex5_stats/js/app.js","moduleName":"./js/app.js","loc":"","name":"result","reasons":[]}]}],"modules":[{"id":0,"identifier":"/Users/kej/sourse/github/webpack_examples/2_plugins/ex5_stats/js/app.js","name":"./js/app.js","size":76,"cacheable":true,"built":true,"optional":false,"prefetched":false,"chunks":[0],"assets":[],"issuer":null,"failed":false,"errors":0,"warnings":0,"reasons":[],"source":"var str = require('./str');\n\nconsole.log(str.format('Hello {0}!', 'World'));"},{"id":1,"identifier":"/Users/kej/sourse/github/webpack_examples/2_plugins/ex5_stats/js/str.js","name":"./js/str.js","size":711,"cacheable":true,"built":true,"optional":false,"prefetched":false,"chunks":[0],"assets":[],"issuer":"/Users/kej/sourse/github/webpack_examples/2_plugins/ex5_stats/js/app.js","failed":false,"errors":0,"warnings":0,"reasons":[{"moduleId":0,"moduleIdentifier":"/Users/kej/sourse/github/webpack_examples/2_plugins/ex5_stats/js/app.js","module":"./js/app.js","moduleName":"./js/app.js","type":"cjs require","userRequest":"./str","loc":"1:10-26"}],"source":"function format(string, obj) {\n var result = string;\n if (!(obj instanceof Object) || arguments.length > 2) {\n var args = [];\n for (var i = 1; i < arguments.length; i++) {\n args.push(arguments[i]);\n }\n obj = args;\n }\n for (var name in obj) {\n if (obj.hasOwnProperty(name)) {\n result = replaceToken(result, name, obj[name]);\n }\n }\n return result;\n}\n\nfunction replaceToken(string, tokenName, value) {\n var pattern = new RegExp(\"{\\\\s*?\" + tokenName + \"\\\\s*?\\\\}\", \"ig\");\n if (string && pattern.test(string)) {\n string = string.replace(pattern, value);\n }\n return string\n}\n\n\nmodule.exports = {\n format: format\n};"}],"filteredModules":0,"children":[]} -------------------------------------------------------------------------------- /2_plugins/ex5_stats/webpack.config.js: -------------------------------------------------------------------------------- 1 | var StatsPlugin = require('stats-webpack-plugin'), 2 | path = require('path'); 3 | 4 | module.exports = { 5 | entry: { 6 | result: './js/app.js' 7 | }, 8 | output: { 9 | filename: '[name].js' 10 | }, 11 | plugins: [ 12 | new StatsPlugin(path.join(__dirname, 'stats.json')) 13 | ] 14 | }; -------------------------------------------------------------------------------- /2_plugins/ex6_i18n/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /2_plugins/ex6_i18n/js/app.js: -------------------------------------------------------------------------------- 1 | var str = require('./str'); 2 | 3 | console.log(str.format(__('Hello {0}!'), __('World'))); -------------------------------------------------------------------------------- /2_plugins/ex6_i18n/js/str.js: -------------------------------------------------------------------------------- 1 | function format(string, obj) { 2 | var result = string; 3 | if (!(obj instanceof Object) || arguments.length > 2) { 4 | var args = []; 5 | for (var i = 1; i < arguments.length; i++) { 6 | args.push(arguments[i]); 7 | } 8 | obj = args; 9 | } 10 | for (var name in obj) { 11 | if (obj.hasOwnProperty(name)) { 12 | result = replaceToken(result, name, obj[name]); 13 | } 14 | } 15 | return result; 16 | } 17 | 18 | function replaceToken(string, tokenName, value) { 19 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 20 | if (string && pattern.test(string)) { 21 | string = string.replace(pattern, value); 22 | } 23 | return string 24 | } 25 | 26 | 27 | module.exports = { 28 | format: format 29 | }; -------------------------------------------------------------------------------- /2_plugins/ex6_i18n/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ex6_i18n", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "result.en.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "i18n-webpack-plugin": "^0.2.7", 13 | "node-libs-browser": "^0.5.0", 14 | "webpack": "^1.9.7" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /2_plugins/ex6_i18n/result.en.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 | var str = __webpack_require__(1); 48 | 49 | console.log(str.format("Hello {0}!", "World")); 50 | 51 | /***/ }, 52 | /* 1 */ 53 | /***/ function(module, exports, __webpack_require__) { 54 | 55 | function format(string, obj) { 56 | var result = string; 57 | if (!(obj instanceof Object) || arguments.length > 2) { 58 | var args = []; 59 | for (var i = 1; i < arguments.length; i++) { 60 | args.push(arguments[i]); 61 | } 62 | obj = args; 63 | } 64 | for (var name in obj) { 65 | if (obj.hasOwnProperty(name)) { 66 | result = replaceToken(result, name, obj[name]); 67 | } 68 | } 69 | return result; 70 | } 71 | 72 | function replaceToken(string, tokenName, value) { 73 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 74 | if (string && pattern.test(string)) { 75 | string = string.replace(pattern, value); 76 | } 77 | return string 78 | } 79 | 80 | 81 | module.exports = { 82 | format: format 83 | }; 84 | 85 | /***/ } 86 | /******/ ]); -------------------------------------------------------------------------------- /2_plugins/ex6_i18n/result.ru.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 | var str = __webpack_require__(1); 48 | 49 | console.log(str.format("Привет {0}!", "Мир")); 50 | 51 | /***/ }, 52 | /* 1 */ 53 | /***/ function(module, exports, __webpack_require__) { 54 | 55 | function format(string, obj) { 56 | var result = string; 57 | if (!(obj instanceof Object) || arguments.length > 2) { 58 | var args = []; 59 | for (var i = 1; i < arguments.length; i++) { 60 | args.push(arguments[i]); 61 | } 62 | obj = args; 63 | } 64 | for (var name in obj) { 65 | if (obj.hasOwnProperty(name)) { 66 | result = replaceToken(result, name, obj[name]); 67 | } 68 | } 69 | return result; 70 | } 71 | 72 | function replaceToken(string, tokenName, value) { 73 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 74 | if (string && pattern.test(string)) { 75 | string = string.replace(pattern, value); 76 | } 77 | return string 78 | } 79 | 80 | 81 | module.exports = { 82 | format: format 83 | }; 84 | 85 | /***/ } 86 | /******/ ]); -------------------------------------------------------------------------------- /2_plugins/ex6_i18n/ru.json: -------------------------------------------------------------------------------- 1 | { 2 | "Hello {0}!": "Привет {0}!", 3 | "World": "Мир" 4 | } -------------------------------------------------------------------------------- /2_plugins/ex6_i18n/webpack.config.js: -------------------------------------------------------------------------------- 1 | var I18nPlugin = require("i18n-webpack-plugin"); 2 | 3 | var languages = { 4 | "en": null, 5 | "ru": require("./ru.json") 6 | }; 7 | 8 | module.exports = Object.keys(languages).map(function(language) { 9 | return { 10 | entry: { 11 | result: './js/app.js' 12 | }, 13 | output: { 14 | filename: '[name].' + language +'.js' 15 | }, 16 | plugins: [ 17 | new I18nPlugin( 18 | languages[language] 19 | ) 20 | ] 21 | } 22 | }); -------------------------------------------------------------------------------- /2_plugins/ex7_html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Webpack App 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /2_plugins/ex7_html/js/app.js: -------------------------------------------------------------------------------- 1 | var str = require('./str'); 2 | 3 | console.log(str.format('Hello {0}!', 'World')); -------------------------------------------------------------------------------- /2_plugins/ex7_html/js/str.js: -------------------------------------------------------------------------------- 1 | function format(string, obj) { 2 | var result = string; 3 | if (!(obj instanceof Object) || arguments.length > 2) { 4 | var args = []; 5 | for (var i = 1; i < arguments.length; i++) { 6 | args.push(arguments[i]); 7 | } 8 | obj = args; 9 | } 10 | for (var name in obj) { 11 | if (obj.hasOwnProperty(name)) { 12 | result = replaceToken(result, name, obj[name]); 13 | } 14 | } 15 | return result; 16 | } 17 | 18 | function replaceToken(string, tokenName, value) { 19 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 20 | if (string && pattern.test(string)) { 21 | string = string.replace(pattern, value); 22 | } 23 | return string 24 | } 25 | 26 | 27 | module.exports = { 28 | format: format 29 | }; -------------------------------------------------------------------------------- /2_plugins/ex7_html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ex7_html", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "result.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "html-webpack-plugin": "^1.4.0" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /2_plugins/ex7_html/result.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 | var str = __webpack_require__(1); 48 | 49 | console.log(str.format('Hello {0}!', 'World')); 50 | 51 | /***/ }, 52 | /* 1 */ 53 | /***/ function(module, exports, __webpack_require__) { 54 | 55 | function format(string, obj) { 56 | var result = string; 57 | if (!(obj instanceof Object) || arguments.length > 2) { 58 | var args = []; 59 | for (var i = 1; i < arguments.length; i++) { 60 | args.push(arguments[i]); 61 | } 62 | obj = args; 63 | } 64 | for (var name in obj) { 65 | if (obj.hasOwnProperty(name)) { 66 | result = replaceToken(result, name, obj[name]); 67 | } 68 | } 69 | return result; 70 | } 71 | 72 | function replaceToken(string, tokenName, value) { 73 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 74 | if (string && pattern.test(string)) { 75 | string = string.replace(pattern, value); 76 | } 77 | return string 78 | } 79 | 80 | 81 | module.exports = { 82 | format: format 83 | }; 84 | 85 | /***/ } 86 | /******/ ]) -------------------------------------------------------------------------------- /2_plugins/ex7_html/webpack.config.js: -------------------------------------------------------------------------------- 1 | var HtmlWebpackPlugin = require('html-webpack-plugin'); 2 | 3 | module.exports = { 4 | entry: { 5 | result: './js/app.js' 6 | }, 7 | output: { 8 | filename: '[name].js' 9 | }, 10 | plugins: [ 11 | new HtmlWebpackPlugin() 12 | ] 13 | }; -------------------------------------------------------------------------------- /3_chunks/ex0_commons_chunk/common.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 | /******/ if(moreModules[0]) { 21 | /******/ installedModules[0] = 0; 22 | /******/ return __webpack_require__(0); 23 | /******/ } 24 | /******/ }; 25 | 26 | /******/ // The module cache 27 | /******/ var installedModules = {}; 28 | 29 | /******/ // object to store loaded and loading chunks 30 | /******/ // "0" means "already loaded" 31 | /******/ // Array means "loading", array contains callbacks 32 | /******/ var installedChunks = { 33 | /******/ 2:0 34 | /******/ }; 35 | 36 | /******/ // The require function 37 | /******/ function __webpack_require__(moduleId) { 38 | 39 | /******/ // Check if module is in cache 40 | /******/ if(installedModules[moduleId]) 41 | /******/ return installedModules[moduleId].exports; 42 | 43 | /******/ // Create a new module (and put it into the cache) 44 | /******/ var module = installedModules[moduleId] = { 45 | /******/ exports: {}, 46 | /******/ id: moduleId, 47 | /******/ loaded: false 48 | /******/ }; 49 | 50 | /******/ // Execute the module function 51 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 52 | 53 | /******/ // Flag the module as loaded 54 | /******/ module.loaded = true; 55 | 56 | /******/ // Return the exports of the module 57 | /******/ return module.exports; 58 | /******/ } 59 | 60 | /******/ // This file contains only the entry chunk. 61 | /******/ // The chunk loading function for additional chunks 62 | /******/ __webpack_require__.e = function requireEnsure(chunkId, callback) { 63 | /******/ // "0" is the signal for "already loaded" 64 | /******/ if(installedChunks[chunkId] === 0) 65 | /******/ return callback.call(null, __webpack_require__); 66 | 67 | /******/ // an array means "currently loading". 68 | /******/ if(installedChunks[chunkId] !== undefined) { 69 | /******/ installedChunks[chunkId].push(callback); 70 | /******/ } else { 71 | /******/ // start chunk loading 72 | /******/ installedChunks[chunkId] = [callback]; 73 | /******/ var head = document.getElementsByTagName('head')[0]; 74 | /******/ var script = document.createElement('script'); 75 | /******/ script.type = 'text/javascript'; 76 | /******/ script.charset = 'utf-8'; 77 | /******/ script.async = true; 78 | 79 | /******/ script.src = __webpack_require__.p + "" + chunkId + "." + ({"0":"page2","1":"page1"}[chunkId]||chunkId) + ".js"; 80 | /******/ head.appendChild(script); 81 | /******/ } 82 | /******/ }; 83 | 84 | /******/ // expose the modules object (__webpack_modules__) 85 | /******/ __webpack_require__.m = modules; 86 | 87 | /******/ // expose the module cache 88 | /******/ __webpack_require__.c = installedModules; 89 | 90 | /******/ // __webpack_public_path__ 91 | /******/ __webpack_require__.p = ""; 92 | /******/ }) 93 | /************************************************************************/ 94 | /******/ ([ 95 | /* 0 */, 96 | /* 1 */ 97 | /***/ function(module, exports, __webpack_require__) { 98 | 99 | function format(string, obj) { 100 | var result = string; 101 | if (!(obj instanceof Object) || arguments.length > 2) { 102 | var args = []; 103 | for (var i = 1; i < arguments.length; i++) { 104 | args.push(arguments[i]); 105 | } 106 | obj = args; 107 | } 108 | for (var name in obj) { 109 | if (obj.hasOwnProperty(name)) { 110 | result = replaceToken(result, name, obj[name]); 111 | } 112 | } 113 | return result; 114 | } 115 | 116 | function replaceToken(string, tokenName, value) { 117 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 118 | if (string && pattern.test(string)) { 119 | string = string.replace(pattern, value); 120 | } 121 | return string 122 | } 123 | 124 | 125 | module.exports = { 126 | format: format 127 | }; 128 | 129 | /***/ } 130 | /******/ ]); -------------------------------------------------------------------------------- /3_chunks/ex0_commons_chunk/js/page1.js: -------------------------------------------------------------------------------- 1 | var str = require('./str'); 2 | 3 | console.log(str.format('Hello {0}!', 'Page1')); -------------------------------------------------------------------------------- /3_chunks/ex0_commons_chunk/js/page2.js: -------------------------------------------------------------------------------- 1 | var str = require('./str'); 2 | 3 | console.log(str.format('Hello {0}!', 'Page2')); -------------------------------------------------------------------------------- /3_chunks/ex0_commons_chunk/js/str.js: -------------------------------------------------------------------------------- 1 | function format(string, obj) { 2 | var result = string; 3 | if (!(obj instanceof Object) || arguments.length > 2) { 4 | var args = []; 5 | for (var i = 1; i < arguments.length; i++) { 6 | args.push(arguments[i]); 7 | } 8 | obj = args; 9 | } 10 | for (var name in obj) { 11 | if (obj.hasOwnProperty(name)) { 12 | result = replaceToken(result, name, obj[name]); 13 | } 14 | } 15 | return result; 16 | } 17 | 18 | function replaceToken(string, tokenName, value) { 19 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 20 | if (string && pattern.test(string)) { 21 | string = string.replace(pattern, value); 22 | } 23 | return string 24 | } 25 | 26 | 27 | module.exports = { 28 | format: format 29 | }; -------------------------------------------------------------------------------- /3_chunks/ex0_commons_chunk/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ex0_commons_chunk", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "webpack": "^1.9.7" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /3_chunks/ex0_commons_chunk/page1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /3_chunks/ex0_commons_chunk/page1.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([1],[ 2 | /* 0 */ 3 | /***/ function(module, exports, __webpack_require__) { 4 | 5 | var str = __webpack_require__(1); 6 | 7 | console.log(str.format('Hello {0}!', 'Page1')); 8 | 9 | /***/ } 10 | ]); -------------------------------------------------------------------------------- /3_chunks/ex0_commons_chunk/page2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /3_chunks/ex0_commons_chunk/page2.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([0],[ 2 | /* 0 */ 3 | /***/ function(module, exports, __webpack_require__) { 4 | 5 | var str = __webpack_require__(1); 6 | 7 | console.log(str.format('Hello {0}!', 'Page2')); 8 | 9 | /***/ } 10 | ]); -------------------------------------------------------------------------------- /3_chunks/ex0_commons_chunk/webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | 3 | module.exports = { 4 | entry: { 5 | page1: './js/page1.js', 6 | page2: './js/page2.js' 7 | }, 8 | output: { 9 | filename: '[name].js' 10 | }, 11 | plugins: [ 12 | new webpack.optimize.CommonsChunkPlugin('common.js') 13 | ] 14 | }; -------------------------------------------------------------------------------- /3_chunks/ex1_vendor/js/page1.js: -------------------------------------------------------------------------------- 1 | var str = require('./str'), 2 | $ = require('jquery'); 3 | 4 | $('.js-my-div').text(str.format('Hello {0}!', 'Page1')); 5 | -------------------------------------------------------------------------------- /3_chunks/ex1_vendor/js/page2.js: -------------------------------------------------------------------------------- 1 | var str = require('./str'); 2 | 3 | console.log(str.format('Hello {0}!', 'Page2')); -------------------------------------------------------------------------------- /3_chunks/ex1_vendor/js/str.js: -------------------------------------------------------------------------------- 1 | function format(string, obj) { 2 | var result = string; 3 | if (!(obj instanceof Object) || arguments.length > 2) { 4 | var args = []; 5 | for (var i = 1; i < arguments.length; i++) { 6 | args.push(arguments[i]); 7 | } 8 | obj = args; 9 | } 10 | for (var name in obj) { 11 | if (obj.hasOwnProperty(name)) { 12 | result = replaceToken(result, name, obj[name]); 13 | } 14 | } 15 | return result; 16 | } 17 | 18 | function replaceToken(string, tokenName, value) { 19 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 20 | if (string && pattern.test(string)) { 21 | string = string.replace(pattern, value); 22 | } 23 | return string 24 | } 25 | 26 | 27 | module.exports = { 28 | format: format 29 | }; -------------------------------------------------------------------------------- /3_chunks/ex1_vendor/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ex1_vendor", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "jquery": "^2.1.4", 13 | "webpack": "^1.9.7" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /3_chunks/ex1_vendor/page1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /3_chunks/ex1_vendor/page1.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([2],[ 2 | /* 0 */ 3 | /***/ function(module, exports, __webpack_require__) { 4 | 5 | var str = __webpack_require__(1), 6 | $ = __webpack_require__(2); 7 | 8 | $('.js-my-div').text(str.format('Hello {0}!', 'Page1')); 9 | 10 | 11 | /***/ } 12 | ]); -------------------------------------------------------------------------------- /3_chunks/ex1_vendor/page2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /3_chunks/ex1_vendor/page2.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([0],[ 2 | /* 0 */ 3 | /***/ function(module, exports, __webpack_require__) { 4 | 5 | var str = __webpack_require__(1); 6 | 7 | console.log(str.format('Hello {0}!', 'Page2')); 8 | 9 | /***/ } 10 | ]); -------------------------------------------------------------------------------- /3_chunks/ex1_vendor/webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | 3 | module.exports = { 4 | entry: { 5 | vendor: ['jquery'], 6 | page1: './js/page1.js', 7 | page2: './js/page2.js' 8 | }, 9 | output: { 10 | filename: '[name].js' 11 | }, 12 | plugins: [ 13 | new webpack.optimize.CommonsChunkPlugin({ 14 | name: "vendor" 15 | }) 16 | ] 17 | }; -------------------------------------------------------------------------------- /3_chunks/ex2_ensure/js/page1.js: -------------------------------------------------------------------------------- 1 | require.ensure(['./str', "jquery"], function(require) { 2 | var str = require('./str'), 3 | $ = require('jquery'); 4 | 5 | $('.js-my-div').text(str.format('Hello {0}!', 'Page1')); 6 | }); 7 | 8 | 9 | -------------------------------------------------------------------------------- /3_chunks/ex2_ensure/js/page2.js: -------------------------------------------------------------------------------- 1 | require.ensure(['./str'], function(require) { 2 | var str = require('./str'); 3 | 4 | console.log(str.format('Hello {0}!', 'Page2')); 5 | }); -------------------------------------------------------------------------------- /3_chunks/ex2_ensure/js/str.js: -------------------------------------------------------------------------------- 1 | function format(string, obj) { 2 | var result = string; 3 | if (!(obj instanceof Object) || arguments.length > 2) { 4 | var args = []; 5 | for (var i = 1; i < arguments.length; i++) { 6 | args.push(arguments[i]); 7 | } 8 | obj = args; 9 | } 10 | for (var name in obj) { 11 | if (obj.hasOwnProperty(name)) { 12 | result = replaceToken(result, name, obj[name]); 13 | } 14 | } 15 | return result; 16 | } 17 | 18 | function replaceToken(string, tokenName, value) { 19 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 20 | if (string && pattern.test(string)) { 21 | string = string.replace(pattern, value); 22 | } 23 | return string 24 | } 25 | 26 | 27 | module.exports = { 28 | format: format 29 | }; -------------------------------------------------------------------------------- /3_chunks/ex2_ensure/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ex2_ensure", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "jquery": "^2.1.4", 13 | "webpack": "^1.9.7" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /3_chunks/ex2_ensure/page1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /3_chunks/ex2_ensure/page1.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 | /******/ 2: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 | __webpack_require__.e/* nsure */(1/* min-size */, function(require) { 99 | var str = __webpack_require__(1), 100 | $ = __webpack_require__(2); 101 | 102 | $('.js-my-div').text(str.format('Hello {0}!', 'Page1')); 103 | }); 104 | 105 | 106 | 107 | 108 | /***/ } 109 | /******/ ]); -------------------------------------------------------------------------------- /3_chunks/ex2_ensure/page2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /3_chunks/ex2_ensure/page2.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 | __webpack_require__.e/* nsure */(1, function(require) { 99 | var str = __webpack_require__(1); 100 | 101 | console.log(str.format('Hello {0}!', 'Page2')); 102 | }); 103 | 104 | /***/ } 105 | /******/ ]); -------------------------------------------------------------------------------- /3_chunks/ex2_ensure/webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | 3 | module.exports = { 4 | entry: { 5 | page1: './js/page1.js', 6 | page2: './js/page2.js' 7 | }, 8 | output: { 9 | filename: '[name].js' 10 | }, 11 | plugins: [ 12 | new webpack.optimize.MinChunkSizePlugin({minChunkSize: 10000}) 13 | ] 14 | }; -------------------------------------------------------------------------------- /3_chunks/ex3_common_css/css/base.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'CT-Review-Widget-Fonts'; 3 | font-weight: normal; 4 | font-style: normal; 5 | 6 | src: url('../fonts/font-icons.eot'); 7 | src: url('../fonts/font-icons.eot') format('embedded-opentype'), 8 | url('../fonts/font-icons.woff') format('woff'), 9 | url('../fonts/font-icons.ttf') format('truetype'), 10 | url('../fonts/font-icons.svg') format('svg'); 11 | } -------------------------------------------------------------------------------- /3_chunks/ex3_common_css/css/page1.css: -------------------------------------------------------------------------------- 1 | @import "./base.css"; 2 | 3 | .star { 4 | position: relative; 5 | display: inline-block; 6 | width: 85px; 7 | height: 24px; 8 | vertical-align: middle; 9 | } 10 | .star:before, 11 | .star:after { 12 | font-family: 'CT-Review-Widget-Fonts', FontAwesome; 13 | font-weight: normal; 14 | font-style: normal; 15 | line-height: 1; 16 | position: absolute; 17 | left: 1px; 18 | top: 1px; 19 | display: inline-block; 20 | font-size: 18px; 21 | } 22 | .star:after { 23 | color: #126f9a; 24 | } 25 | .star:before { 26 | color: #d6dbe0; 27 | content: "\f005\f005\f005\f005\f005"; 28 | } 29 | .star--s0:after { 30 | content: ''; 31 | } 32 | .star--s1:after { 33 | content: "\f089"; 34 | } 35 | .star--s2:after { 36 | content: "\f005"; 37 | } 38 | .star--s3:after { 39 | content: "\f005\f089"; 40 | } 41 | .star--s4:after { 42 | content: "\f005\f005"; 43 | } 44 | .star--s5:after { 45 | content: "\f005\f005\f089"; 46 | } 47 | .star--s6:after { 48 | content: "\f005\f005\f005"; 49 | } 50 | .star--s7:after { 51 | content: "\f005\f005\f005\f089"; 52 | } 53 | .star--s8:after { 54 | content: "\f005\f005\f005\f005"; 55 | } 56 | .star--s9:after { 57 | content: "\f005\f005\f005\f005\f089"; 58 | } 59 | .star--s10:after { 60 | content: "\f005\f005\f005\f005\f005"; 61 | } 62 | -------------------------------------------------------------------------------- /3_chunks/ex3_common_css/css/page2.css: -------------------------------------------------------------------------------- 1 | @import "./base.css"; 2 | 3 | .social-button { 4 | padding: 0; 5 | margin: 10px 0; 6 | display: table; 7 | color: #ffffff; 8 | border-radius: 3; 9 | } 10 | .social-button.social-button--facebook { 11 | background: #364085; 12 | } 13 | .social-button.social-button--facebook > .social-button__control:hover { 14 | background: #3d4997; 15 | } 16 | .social-button.social-button--linkedin { 17 | background: #2b61a5; 18 | } 19 | .social-button.social-button--linkedin > .social-button__control:hover { 20 | background: #306db9; 21 | } 22 | .social-button__logo { 23 | box-sizing: border-box; 24 | display: table; 25 | width: 40px; 26 | border-right: 2px solid rgba(255, 255, 255, 0.15); 27 | padding: 10px 5px 10px 10px; 28 | vertical-align: middle; 29 | white-space: nowrap; 30 | text-decoration: none; 31 | font-size: 22px; 32 | } 33 | .social-button__control { 34 | box-sizing: border-box; 35 | display: table-cell; 36 | width: 100%; 37 | font-size: 18px; 38 | font-weight: 400; 39 | color: #fff; 40 | border-top-right-radius: 3; 41 | border-bottom-right-radius: 3; 42 | padding: 10px 16px; 43 | margin-bottom: 0; 44 | cursor: pointer; 45 | text-align: center; 46 | vertical-align: middle; 47 | white-space: nowrap; 48 | text-decoration: none; 49 | } 50 | .social-button__control:hover { 51 | color: #fff; 52 | text-decoration: none; 53 | } 54 | .social-button.social-button--facebook > .social-button__logo:after { 55 | font-family: 'CT-Review-Widget-Fonts', FontAwesome; 56 | font-weight: normal; 57 | font-style: normal; 58 | line-height: 1; 59 | content: "\f09a"; 60 | } 61 | .social-button.social-button--linkedin > .social-button__logo:after { 62 | font-family: 'CT-Review-Widget-Fonts', FontAwesome; 63 | font-weight: normal; 64 | font-style: normal; 65 | line-height: 1; 66 | content: "\f0e1"; 67 | } 68 | -------------------------------------------------------------------------------- /3_chunks/ex3_common_css/fonts/font-icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/erm0l0v/webpack_examples/b72459134c87c23db0f4a77a22664f8819b848b1/3_chunks/ex3_common_css/fonts/font-icons.eot -------------------------------------------------------------------------------- /3_chunks/ex3_common_css/fonts/font-icons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /3_chunks/ex3_common_css/fonts/font-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/erm0l0v/webpack_examples/b72459134c87c23db0f4a77a22664f8819b848b1/3_chunks/ex3_common_css/fonts/font-icons.ttf -------------------------------------------------------------------------------- /3_chunks/ex3_common_css/fonts/font-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/erm0l0v/webpack_examples/b72459134c87c23db0f4a77a22664f8819b848b1/3_chunks/ex3_common_css/fonts/font-icons.woff -------------------------------------------------------------------------------- /3_chunks/ex3_common_css/js/page1.js: -------------------------------------------------------------------------------- 1 | var str = require('./str'), 2 | $ = require('jquery'); 3 | 4 | require('../css/page1.css'); 5 | 6 | for (var i = 0; i <= 10; i++) { 7 | $('.js-my-div').append(str.format('

', i)); 8 | } 9 | -------------------------------------------------------------------------------- /3_chunks/ex3_common_css/js/page2.js: -------------------------------------------------------------------------------- 1 | var str = require('./str'), 2 | $ = require('jquery'); 3 | 4 | require('../css/page2.css'); 5 | 6 | ['facebook', 'linkedin'].map(function (mod) { 7 | return str.format('
', mod); 8 | }).forEach(function (html) { 9 | $('.js-my-div').append(html); 10 | }); 11 | -------------------------------------------------------------------------------- /3_chunks/ex3_common_css/js/str.js: -------------------------------------------------------------------------------- 1 | function format(string, obj) { 2 | var result = string; 3 | if (!(obj instanceof Object) || arguments.length > 2) { 4 | var args = []; 5 | for (var i = 1; i < arguments.length; i++) { 6 | args.push(arguments[i]); 7 | } 8 | obj = args; 9 | } 10 | for (var name in obj) { 11 | if (obj.hasOwnProperty(name)) { 12 | result = replaceToken(result, name, obj[name]); 13 | } 14 | } 15 | return result; 16 | } 17 | 18 | function replaceToken(string, tokenName, value) { 19 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 20 | if (string && pattern.test(string)) { 21 | string = string.replace(pattern, value); 22 | } 23 | return string 24 | } 25 | 26 | 27 | module.exports = { 28 | format: format 29 | }; -------------------------------------------------------------------------------- /3_chunks/ex3_common_css/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ex3_common_css", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "result.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "css-loader": "^0.12.1", 13 | "extract-text-webpack-plugin": "^0.8.0", 14 | "file-loader": "^0.8.1", 15 | "jquery": "^2.1.4", 16 | "node-libs-browser": "^0.5.0", 17 | "style-loader": "^0.12.2", 18 | "url-loader": "^0.5.5", 19 | "webpack": "^1.9.7" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /3_chunks/ex3_common_css/page1.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | .star { 4 | position: relative; 5 | display: inline-block; 6 | width: 85px; 7 | height: 24px; 8 | vertical-align: middle; 9 | } 10 | .star:before, 11 | .star:after { 12 | font-family: 'CT-Review-Widget-Fonts', FontAwesome; 13 | font-weight: normal; 14 | font-style: normal; 15 | line-height: 1; 16 | position: absolute; 17 | left: 1px; 18 | top: 1px; 19 | display: inline-block; 20 | font-size: 18px; 21 | } 22 | .star:after { 23 | color: #126f9a; 24 | } 25 | .star:before { 26 | color: #d6dbe0; 27 | content: "\f005\f005\f005\f005\f005"; 28 | } 29 | .star--s0:after { 30 | content: ''; 31 | } 32 | .star--s1:after { 33 | content: "\f089"; 34 | } 35 | .star--s2:after { 36 | content: "\f005"; 37 | } 38 | .star--s3:after { 39 | content: "\f005\f089"; 40 | } 41 | .star--s4:after { 42 | content: "\f005\f005"; 43 | } 44 | .star--s5:after { 45 | content: "\f005\f005\f089"; 46 | } 47 | .star--s6:after { 48 | content: "\f005\f005\f005"; 49 | } 50 | .star--s7:after { 51 | content: "\f005\f005\f005\f089"; 52 | } 53 | .star--s8:after { 54 | content: "\f005\f005\f005\f005"; 55 | } 56 | .star--s9:after { 57 | content: "\f005\f005\f005\f005\f089"; 58 | } 59 | .star--s10:after { 60 | content: "\f005\f005\f005\f005\f005"; 61 | } 62 | -------------------------------------------------------------------------------- /3_chunks/ex3_common_css/page1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /3_chunks/ex3_common_css/page1.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([1],[ 2 | /* 0 */ 3 | /***/ function(module, exports, __webpack_require__) { 4 | 5 | var str = __webpack_require__(2), 6 | $ = __webpack_require__(1); 7 | 8 | __webpack_require__(3); 9 | 10 | for (var i = 0; i <= 10; i++) { 11 | $('.js-my-div').append(str.format('

', i)); 12 | } 13 | 14 | 15 | /***/ }, 16 | /* 1 */, 17 | /* 2 */, 18 | /* 3 */ 19 | /***/ function(module, exports, __webpack_require__) { 20 | 21 | // removed by extract-text-webpack-plugin 22 | 23 | /***/ } 24 | ]); -------------------------------------------------------------------------------- /3_chunks/ex3_common_css/page2.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | .social-button { 4 | padding: 0; 5 | margin: 10px 0; 6 | display: table; 7 | color: #ffffff; 8 | border-radius: 3; 9 | } 10 | .social-button.social-button--facebook { 11 | background: #364085; 12 | } 13 | .social-button.social-button--facebook > .social-button__control:hover { 14 | background: #3d4997; 15 | } 16 | .social-button.social-button--linkedin { 17 | background: #2b61a5; 18 | } 19 | .social-button.social-button--linkedin > .social-button__control:hover { 20 | background: #306db9; 21 | } 22 | .social-button__logo { 23 | box-sizing: border-box; 24 | display: table; 25 | width: 40px; 26 | border-right: 2px solid rgba(255, 255, 255, 0.15); 27 | padding: 10px 5px 10px 10px; 28 | vertical-align: middle; 29 | white-space: nowrap; 30 | text-decoration: none; 31 | font-size: 22px; 32 | } 33 | .social-button__control { 34 | box-sizing: border-box; 35 | display: table-cell; 36 | width: 100%; 37 | font-size: 18px; 38 | font-weight: 400; 39 | color: #fff; 40 | border-top-right-radius: 3; 41 | border-bottom-right-radius: 3; 42 | padding: 10px 16px; 43 | margin-bottom: 0; 44 | cursor: pointer; 45 | text-align: center; 46 | vertical-align: middle; 47 | white-space: nowrap; 48 | text-decoration: none; 49 | } 50 | .social-button__control:hover { 51 | color: #fff; 52 | text-decoration: none; 53 | } 54 | .social-button.social-button--facebook > .social-button__logo:after { 55 | font-family: 'CT-Review-Widget-Fonts', FontAwesome; 56 | font-weight: normal; 57 | font-style: normal; 58 | line-height: 1; 59 | content: "\f09a"; 60 | } 61 | .social-button.social-button--linkedin > .social-button__logo:after { 62 | font-family: 'CT-Review-Widget-Fonts', FontAwesome; 63 | font-weight: normal; 64 | font-style: normal; 65 | line-height: 1; 66 | content: "\f0e1"; 67 | } 68 | -------------------------------------------------------------------------------- /3_chunks/ex3_common_css/page2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /3_chunks/ex3_common_css/page2.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([0],{ 2 | 3 | /***/ 0: 4 | /***/ function(module, exports, __webpack_require__) { 5 | 6 | var str = __webpack_require__(2), 7 | $ = __webpack_require__(1); 8 | 9 | __webpack_require__(5); 10 | 11 | ['facebook', 'linkedin'].map(function (mod) { 12 | return str.format('
', mod); 13 | }).forEach(function (html) { 14 | $('.js-my-div').append(html); 15 | }); 16 | 17 | 18 | /***/ }, 19 | 20 | /***/ 5: 21 | /***/ function(module, exports, __webpack_require__) { 22 | 23 | // removed by extract-text-webpack-plugin 24 | 25 | /***/ } 26 | 27 | }); -------------------------------------------------------------------------------- /3_chunks/ex3_common_css/webpack.config.js: -------------------------------------------------------------------------------- 1 | var ExtractTextPlugin = require("extract-text-webpack-plugin"), 2 | webpack = require('webpack'); 3 | 4 | module.exports = { 5 | entry: { 6 | page1: './js/page1.js', 7 | page2: './js/page2.js' 8 | }, 9 | output: { 10 | filename: '[name].js' 11 | }, 12 | module: { 13 | loaders: [ 14 | { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') }, 15 | { test: /(\.eot$|\.svg$|\.ttf$|\.woff$)/, loader: 'url-loader?limit=10000' } 16 | ] 17 | }, 18 | plugins: [ 19 | new webpack.optimize.CommonsChunkPlugin({ 20 | name: 'common' 21 | }), 22 | new ExtractTextPlugin("[name].css") 23 | ] 24 | }; -------------------------------------------------------------------------------- /3_chunks/ex4_common_scss/css/base.scss: -------------------------------------------------------------------------------- 1 | $font-weight: normal; 2 | 3 | @font-face { 4 | font-family: 'CT-Review-Widget-Fonts'; 5 | font-weight: $font-weight; 6 | font-style: normal; 7 | 8 | src: url('../fonts/font-icons.eot'); 9 | src: url('../fonts/font-icons.eot') format('embedded-opentype'), 10 | url('../fonts/font-icons.woff') format('woff'), 11 | url('../fonts/font-icons.ttf') format('truetype'), 12 | url('../fonts/font-icons.svg') format('svg'); 13 | } -------------------------------------------------------------------------------- /3_chunks/ex4_common_scss/css/page1.scss: -------------------------------------------------------------------------------- 1 | $star-width: 85px; 2 | 3 | .star { 4 | position: relative; 5 | display: inline-block; 6 | width: $star-width; 7 | height: 24px; 8 | vertical-align: middle; 9 | } 10 | .star:before, 11 | .star:after { 12 | font-family: 'CT-Review-Widget-Fonts', FontAwesome; 13 | font-weight: normal; 14 | font-style: normal; 15 | line-height: 1; 16 | position: absolute; 17 | left: 1px; 18 | top: 1px; 19 | display: inline-block; 20 | font-size: 18px; 21 | } 22 | .star:after { 23 | color: #126f9a; 24 | } 25 | .star:before { 26 | color: #d6dbe0; 27 | content: "\f005\f005\f005\f005\f005"; 28 | } 29 | .star--s0:after { 30 | content: ''; 31 | } 32 | .star--s1:after { 33 | content: "\f089"; 34 | } 35 | .star--s2:after { 36 | content: "\f005"; 37 | } 38 | .star--s3:after { 39 | content: "\f005\f089"; 40 | } 41 | .star--s4:after { 42 | content: "\f005\f005"; 43 | } 44 | .star--s5:after { 45 | content: "\f005\f005\f089"; 46 | } 47 | .star--s6:after { 48 | content: "\f005\f005\f005"; 49 | } 50 | .star--s7:after { 51 | content: "\f005\f005\f005\f089"; 52 | } 53 | .star--s8:after { 54 | content: "\f005\f005\f005\f005"; 55 | } 56 | .star--s9:after { 57 | content: "\f005\f005\f005\f005\f089"; 58 | } 59 | .star--s10:after { 60 | content: "\f005\f005\f005\f005\f005"; 61 | } 62 | -------------------------------------------------------------------------------- /3_chunks/ex4_common_scss/css/page2.scss: -------------------------------------------------------------------------------- 1 | $white: #fff; 2 | 3 | .social-button { 4 | padding: 0; 5 | margin: 10px 0; 6 | display: table; 7 | color: $white; 8 | border-radius: 3; 9 | } 10 | .social-button.social-button--facebook { 11 | background: #364085; 12 | } 13 | .social-button.social-button--facebook > .social-button__control:hover { 14 | background: #3d4997; 15 | } 16 | .social-button.social-button--linkedin { 17 | background: #2b61a5; 18 | } 19 | .social-button.social-button--linkedin > .social-button__control:hover { 20 | background: #306db9; 21 | } 22 | .social-button__logo { 23 | box-sizing: border-box; 24 | display: table; 25 | width: 40px; 26 | border-right: 2px solid rgba(255, 255, 255, 0.15); 27 | padding: 10px 5px 10px 10px; 28 | vertical-align: middle; 29 | white-space: nowrap; 30 | text-decoration: none; 31 | font-size: 22px; 32 | } 33 | .social-button__control { 34 | box-sizing: border-box; 35 | display: table-cell; 36 | width: 100%; 37 | font-size: 18px; 38 | font-weight: 400; 39 | color: #fff; 40 | border-top-right-radius: 3; 41 | border-bottom-right-radius: 3; 42 | padding: 10px 16px; 43 | margin-bottom: 0; 44 | cursor: pointer; 45 | text-align: center; 46 | vertical-align: middle; 47 | white-space: nowrap; 48 | text-decoration: none; 49 | } 50 | .social-button__control:hover { 51 | color: #fff; 52 | text-decoration: none; 53 | } 54 | .social-button.social-button--facebook > .social-button__logo:after { 55 | font-family: 'CT-Review-Widget-Fonts', FontAwesome; 56 | font-weight: normal; 57 | font-style: normal; 58 | line-height: 1; 59 | content: "\f09a"; 60 | } 61 | .social-button.social-button--linkedin > .social-button__logo:after { 62 | font-family: 'CT-Review-Widget-Fonts', FontAwesome; 63 | font-weight: normal; 64 | font-style: normal; 65 | line-height: 1; 66 | content: "\f0e1"; 67 | } 68 | -------------------------------------------------------------------------------- /3_chunks/ex4_common_scss/fonts/font-icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/erm0l0v/webpack_examples/b72459134c87c23db0f4a77a22664f8819b848b1/3_chunks/ex4_common_scss/fonts/font-icons.eot -------------------------------------------------------------------------------- /3_chunks/ex4_common_scss/fonts/font-icons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /3_chunks/ex4_common_scss/fonts/font-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/erm0l0v/webpack_examples/b72459134c87c23db0f4a77a22664f8819b848b1/3_chunks/ex4_common_scss/fonts/font-icons.ttf -------------------------------------------------------------------------------- /3_chunks/ex4_common_scss/fonts/font-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/erm0l0v/webpack_examples/b72459134c87c23db0f4a77a22664f8819b848b1/3_chunks/ex4_common_scss/fonts/font-icons.woff -------------------------------------------------------------------------------- /3_chunks/ex4_common_scss/js/page1.js: -------------------------------------------------------------------------------- 1 | var str = require('./str'), 2 | $ = require('jquery'); 3 | 4 | require("../css/base.scss"); 5 | require('../css/page1.scss'); 6 | 7 | for (var i = 0; i <= 10; i++) { 8 | $('.js-my-div').append(str.format('

', i)); 9 | } 10 | -------------------------------------------------------------------------------- /3_chunks/ex4_common_scss/js/page2.js: -------------------------------------------------------------------------------- 1 | var str = require('./str'), 2 | $ = require('jquery'); 3 | 4 | require("../css/base.scss"); 5 | require('../css/page2.scss'); 6 | 7 | ['facebook', 'linkedin'].map(function (mod) { 8 | return str.format('
', mod); 9 | }).forEach(function (html) { 10 | $('.js-my-div').append(html); 11 | }); 12 | -------------------------------------------------------------------------------- /3_chunks/ex4_common_scss/js/str.js: -------------------------------------------------------------------------------- 1 | function format(string, obj) { 2 | var result = string; 3 | if (!(obj instanceof Object) || arguments.length > 2) { 4 | var args = []; 5 | for (var i = 1; i < arguments.length; i++) { 6 | args.push(arguments[i]); 7 | } 8 | obj = args; 9 | } 10 | for (var name in obj) { 11 | if (obj.hasOwnProperty(name)) { 12 | result = replaceToken(result, name, obj[name]); 13 | } 14 | } 15 | return result; 16 | } 17 | 18 | function replaceToken(string, tokenName, value) { 19 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 20 | if (string && pattern.test(string)) { 21 | string = string.replace(pattern, value); 22 | } 23 | return string 24 | } 25 | 26 | 27 | module.exports = { 28 | format: format 29 | }; -------------------------------------------------------------------------------- /3_chunks/ex4_common_scss/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ex3_common_css", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "result.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "css-loader": "^0.12.1", 13 | "extract-text-webpack-plugin": "^0.8.0", 14 | "file-loader": "^0.8.1", 15 | "jquery": "^2.1.4", 16 | "node-libs-browser": "^0.5.0", 17 | "style-loader": "^0.12.2", 18 | "url-loader": "^0.5.5", 19 | "webpack": "^1.9.7" 20 | }, 21 | "dependencies": { 22 | "sass-loader": "^0.4.2" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /3_chunks/ex4_common_scss/page1.css: -------------------------------------------------------------------------------- 1 | .star { 2 | position: relative; 3 | display: inline-block; 4 | width: 85px; 5 | height: 24px; 6 | vertical-align: middle; } 7 | 8 | .star:before, .star:after { 9 | font-family: 'CT-Review-Widget-Fonts', FontAwesome; 10 | font-weight: normal; 11 | font-style: normal; 12 | line-height: 1; 13 | position: absolute; 14 | left: 1px; 15 | top: 1px; 16 | display: inline-block; 17 | font-size: 18px; } 18 | 19 | .star:after { 20 | color: #126f9a; } 21 | 22 | .star:before { 23 | color: #d6dbe0; 24 | content: "\f005\f005\f005\f005\f005"; } 25 | 26 | .star--s0:after { 27 | content: ''; } 28 | 29 | .star--s1:after { 30 | content: "\f089"; } 31 | 32 | .star--s2:after { 33 | content: "\f005"; } 34 | 35 | .star--s3:after { 36 | content: "\f005\f089"; } 37 | 38 | .star--s4:after { 39 | content: "\f005\f005"; } 40 | 41 | .star--s5:after { 42 | content: "\f005\f005\f089"; } 43 | 44 | .star--s6:after { 45 | content: "\f005\f005\f005"; } 46 | 47 | .star--s7:after { 48 | content: "\f005\f005\f005\f089"; } 49 | 50 | .star--s8:after { 51 | content: "\f005\f005\f005\f005"; } 52 | 53 | .star--s9:after { 54 | content: "\f005\f005\f005\f005\f089"; } 55 | 56 | .star--s10:after { 57 | content: "\f005\f005\f005\f005\f005"; } 58 | -------------------------------------------------------------------------------- /3_chunks/ex4_common_scss/page1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /3_chunks/ex4_common_scss/page1.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([0],[ 2 | /* 0 */ 3 | /***/ function(module, exports, __webpack_require__) { 4 | 5 | var str = __webpack_require__(2), 6 | $ = __webpack_require__(3); 7 | 8 | __webpack_require__(4); 9 | __webpack_require__(1); 10 | 11 | for (var i = 0; i <= 10; i++) { 12 | $('.js-my-div').append(str.format('

', i)); 13 | } 14 | 15 | 16 | /***/ }, 17 | /* 1 */ 18 | /***/ function(module, exports, __webpack_require__) { 19 | 20 | // removed by extract-text-webpack-plugin 21 | 22 | /***/ } 23 | ]); -------------------------------------------------------------------------------- /3_chunks/ex4_common_scss/page2.css: -------------------------------------------------------------------------------- 1 | .social-button { 2 | padding: 0; 3 | margin: 10px 0; 4 | display: table; 5 | color: #fff; 6 | border-radius: 3; } 7 | 8 | .social-button.social-button--facebook { 9 | background: #364085; } 10 | 11 | .social-button.social-button--facebook > .social-button__control:hover { 12 | background: #3d4997; } 13 | 14 | .social-button.social-button--linkedin { 15 | background: #2b61a5; } 16 | 17 | .social-button.social-button--linkedin > .social-button__control:hover { 18 | background: #306db9; } 19 | 20 | .social-button__logo { 21 | box-sizing: border-box; 22 | display: table; 23 | width: 40px; 24 | border-right: 2px solid rgba(255, 255, 255, 0.15); 25 | padding: 10px 5px 10px 10px; 26 | vertical-align: middle; 27 | white-space: nowrap; 28 | text-decoration: none; 29 | font-size: 22px; } 30 | 31 | .social-button__control { 32 | box-sizing: border-box; 33 | display: table-cell; 34 | width: 100%; 35 | font-size: 18px; 36 | font-weight: 400; 37 | color: #fff; 38 | border-top-right-radius: 3; 39 | border-bottom-right-radius: 3; 40 | padding: 10px 16px; 41 | margin-bottom: 0; 42 | cursor: pointer; 43 | text-align: center; 44 | vertical-align: middle; 45 | white-space: nowrap; 46 | text-decoration: none; } 47 | 48 | .social-button__control:hover { 49 | color: #fff; 50 | text-decoration: none; } 51 | 52 | .social-button.social-button--facebook > .social-button__logo:after { 53 | font-family: 'CT-Review-Widget-Fonts', FontAwesome; 54 | font-weight: normal; 55 | font-style: normal; 56 | line-height: 1; 57 | content: "\f09a"; } 58 | 59 | .social-button.social-button--linkedin > .social-button__logo:after { 60 | font-family: 'CT-Review-Widget-Fonts', FontAwesome; 61 | font-weight: normal; 62 | font-style: normal; 63 | line-height: 1; 64 | content: "\f0e1"; } 65 | -------------------------------------------------------------------------------- /3_chunks/ex4_common_scss/page2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /3_chunks/ex4_common_scss/page2.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([1],{ 2 | 3 | /***/ 0: 4 | /***/ function(module, exports, __webpack_require__) { 5 | 6 | var str = __webpack_require__(2), 7 | $ = __webpack_require__(3); 8 | 9 | __webpack_require__(4); 10 | __webpack_require__(6); 11 | 12 | ['facebook', 'linkedin'].map(function (mod) { 13 | return str.format('
', mod); 14 | }).forEach(function (html) { 15 | $('.js-my-div').append(html); 16 | }); 17 | 18 | 19 | /***/ }, 20 | 21 | /***/ 6: 22 | /***/ function(module, exports, __webpack_require__) { 23 | 24 | // removed by extract-text-webpack-plugin 25 | 26 | /***/ } 27 | 28 | }); -------------------------------------------------------------------------------- /3_chunks/ex4_common_scss/webpack.config.js: -------------------------------------------------------------------------------- 1 | var ExtractTextPlugin = require("extract-text-webpack-plugin"), 2 | webpack = require('webpack'); 3 | 4 | module.exports = { 5 | entry: { 6 | page1: './js/page1.js', 7 | page2: './js/page2.js' 8 | }, 9 | output: { 10 | filename: '[name].js' 11 | }, 12 | module: { 13 | loaders: [ 14 | { test: /\.scss$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader') }, 15 | { test: /(\.eot$|\.svg$|\.ttf$|\.woff$)/, loader: 'url-loader?limit=10000' } 16 | ] 17 | }, 18 | plugins: [ 19 | new webpack.optimize.CommonsChunkPlugin({ 20 | name: 'common' 21 | }), 22 | new ExtractTextPlugin("[name].css") 23 | ] 24 | }; -------------------------------------------------------------------------------- /4_common_cases/ex0_source_map/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /4_common_cases/ex0_source_map/js/app.js: -------------------------------------------------------------------------------- 1 | var str = require('./str'); 2 | 3 | console.log(str.format('Hello {0}!', 'World')); -------------------------------------------------------------------------------- /4_common_cases/ex0_source_map/js/str.js: -------------------------------------------------------------------------------- 1 | function format(string, obj) { 2 | var result = string; 3 | if (!(obj instanceof Object) || arguments.length > 2) { 4 | var args = []; 5 | for (var i = 1; i < arguments.length; i++) { 6 | args.push(arguments[i]); 7 | } 8 | obj = args; 9 | } 10 | for (var name in obj) { 11 | if (obj.hasOwnProperty(name)) { 12 | result = replaceToken(result, name, obj[name]); 13 | } 14 | } 15 | return result; 16 | } 17 | 18 | function replaceToken(string, tokenName, value) { 19 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 20 | if (string && pattern.test(string)) { 21 | string = string.replace(pattern, value); 22 | } 23 | return string 24 | } 25 | 26 | 27 | module.exports = { 28 | format: format 29 | }; -------------------------------------------------------------------------------- /4_common_cases/ex0_source_map/result.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 | var str = __webpack_require__(1); 48 | 49 | console.log(str.format('Hello {0}!', 'World')); 50 | 51 | /***/ }, 52 | /* 1 */ 53 | /***/ function(module, exports, __webpack_require__) { 54 | 55 | function format(string, obj) { 56 | var result = string; 57 | if (!(obj instanceof Object) || arguments.length > 2) { 58 | var args = []; 59 | for (var i = 1; i < arguments.length; i++) { 60 | args.push(arguments[i]); 61 | } 62 | obj = args; 63 | } 64 | for (var name in obj) { 65 | if (obj.hasOwnProperty(name)) { 66 | result = replaceToken(result, name, obj[name]); 67 | } 68 | } 69 | return result; 70 | } 71 | 72 | function replaceToken(string, tokenName, value) { 73 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 74 | if (string && pattern.test(string)) { 75 | string = string.replace(pattern, value); 76 | } 77 | return string 78 | } 79 | 80 | 81 | module.exports = { 82 | format: format 83 | }; 84 | 85 | /***/ } 86 | /******/ ]) 87 | //# sourceMappingURL=result.js.map -------------------------------------------------------------------------------- /4_common_cases/ex0_source_map/result.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///webpack/bootstrap 72bd4b0abc59fa527875","webpack:///./js/app.js","webpack:///./js/str.js"],"names":[],"mappings":";AAAA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,uBAAe;AACf;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA,wC;;;;;;;ACtCA;;AAEA,gCAA+B,EAAE,c;;;;;;ACFjC;AACA;AACA;AACA;AACA,wBAAuB,sBAAsB;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,gCAA+B,8BAA8B;AAC7D;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA,G","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(0);\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap 72bd4b0abc59fa527875\n **/","var str = require('./str');\n\nconsole.log(str.format('Hello {0}!', 'World'));\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./js/app.js\n ** module id = 0\n ** module chunks = 0\n **/","function format(string, obj) {\n var result = string;\n if (!(obj instanceof Object) || arguments.length > 2) {\n var args = [];\n for (var i = 1; i < arguments.length; i++) {\n args.push(arguments[i]);\n }\n obj = args;\n }\n for (var name in obj) {\n if (obj.hasOwnProperty(name)) {\n result = replaceToken(result, name, obj[name]);\n }\n }\n return result;\n}\n\nfunction replaceToken(string, tokenName, value) {\n var pattern = new RegExp(\"{\\\\s*?\" + tokenName + \"\\\\s*?\\\\}\", \"ig\");\n if (string && pattern.test(string)) {\n string = string.replace(pattern, value);\n }\n return string\n}\n\n\nmodule.exports = {\n format: format\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./js/str.js\n ** module id = 1\n ** module chunks = 0\n **/"],"sourceRoot":"","file":"result.js"} -------------------------------------------------------------------------------- /4_common_cases/ex0_source_map/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: { 3 | result: './js/app.js' 4 | }, 5 | output: { 6 | filename: '[name].js' 7 | }, 8 | devtool: "source-map" 9 | }; -------------------------------------------------------------------------------- /4_common_cases/ex1_uglify/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /4_common_cases/ex1_uglify/js/app.js: -------------------------------------------------------------------------------- 1 | var str = require('./str'); 2 | 3 | console.log(str.format('Hello {0}!', 'World')); -------------------------------------------------------------------------------- /4_common_cases/ex1_uglify/js/str.js: -------------------------------------------------------------------------------- 1 | function format(string, obj) { 2 | var result = string; 3 | if (!(obj instanceof Object) || arguments.length > 2) { 4 | var args = []; 5 | for (var i = 1; i < arguments.length; i++) { 6 | args.push(arguments[i]); 7 | } 8 | obj = args; 9 | } 10 | for (var name in obj) { 11 | if (obj.hasOwnProperty(name)) { 12 | result = replaceToken(result, name, obj[name]); 13 | } 14 | } 15 | return result; 16 | } 17 | 18 | function replaceToken(string, tokenName, value) { 19 | var pattern = new RegExp("{\\s*?" + tokenName + "\\s*?\\}", "ig"); 20 | if (string && pattern.test(string)) { 21 | string = string.replace(pattern, value); 22 | } 23 | return string 24 | } 25 | 26 | 27 | module.exports = { 28 | format: format 29 | }; -------------------------------------------------------------------------------- /4_common_cases/ex1_uglify/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ex1_uglify", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "result.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "node-libs-browser": "^0.5.0", 13 | "webpack": "^1.9.7" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /4_common_cases/ex1_uglify/result.js: -------------------------------------------------------------------------------- 1 | !function(r){function t(n){if(e[n])return e[n].exports;var o=e[n]={exports:{},id:n,loaded:!1};return r[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var e={};return t.m=r,t.c=e,t.p="",t(0)}([function(r,t,e){var n=e(1);console.log(n.format("Hello {0}!","World"))},function(r,t,e){function n(r,t){var e=r;if(!(t instanceof Object)||arguments.length>2){for(var n=[],a=1;a 2) {\n\t var args = [];\n\t for (var i = 1; i < arguments.length; i++) {\n\t args.push(arguments[i]);\n\t }\n\t obj = args;\n\t }\n\t for (var name in obj) {\n\t if (obj.hasOwnProperty(name)) {\n\t result = replaceToken(result, name, obj[name]);\n\t }\n\t }\n\t return result;\n\t}\n\t\n\tfunction replaceToken(string, tokenName, value) {\n\t var pattern = new RegExp(\"{\\\\s*?\" + tokenName + \"\\\\s*?\\\\}\", \"ig\");\n\t if (string && pattern.test(string)) {\n\t string = string.replace(pattern, value);\n\t }\n\t return string\n\t}\n\t\n\t\n\tmodule.exports = {\n\t format: format\n\t};\n\n/***/ }\n/******/ ]);\n\n\n/** WEBPACK FOOTER **\n ** result.js\n **/"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(0);\n\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap c06ee771d1ba570975d8\n **/","var str = require('./str');\n\nconsole.log(str.format('Hello {0}!', 'World'));\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./js/app.js\n ** module id = 0\n ** module chunks = 0\n **/","function format(string, obj) {\n var result = string;\n if (!(obj instanceof Object) || arguments.length > 2) {\n var args = [];\n for (var i = 1; i < arguments.length; i++) {\n args.push(arguments[i]);\n }\n obj = args;\n }\n for (var name in obj) {\n if (obj.hasOwnProperty(name)) {\n result = replaceToken(result, name, obj[name]);\n }\n }\n return result;\n}\n\nfunction replaceToken(string, tokenName, value) {\n var pattern = new RegExp(\"{\\\\s*?\" + tokenName + \"\\\\s*?\\\\}\", \"ig\");\n if (string && pattern.test(string)) {\n string = string.replace(pattern, value);\n }\n return string\n}\n\n\nmodule.exports = {\n format: format\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./js/str.js\n ** module id = 1\n ** module chunks = 0\n **/"],"sourceRoot":""} -------------------------------------------------------------------------------- /4_common_cases/ex1_uglify/webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | 3 | module.exports = { 4 | entry: { 5 | result: './js/app.js' 6 | }, 7 | output: { 8 | filename: '[name].js' 9 | }, 10 | devtool: "source-map", 11 | plugins: [ 12 | new webpack.optimize.UglifyJsPlugin() 13 | ] 14 | }; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Simple webpack examples. 2 | --------------------------------------------------------------------------------