├── .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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------