Improved Readme and fixes to make it actually work

README.md

@@ -1 +1,11 @@
-# understanding_webpack
+# Example for [Webpack Tutorial: Understanding How it Works](https://www.ag-grid.com/ag-grid-understanding-webpack/)
+
+## To make this example work
+You will need `Node.js` (https://nodejs.org/en/) installed.
+`npm` is package manager for it.
+
+1) `git clone https://github.com/seanlandsman/ag-grid-understanding-webpack.git`
+2) `cd ag-grid-understanding-webpack`
+3) `npm install` installs packages listed in `packages.json`, so Webpack can use or bundle them.
+4) `node_modules/webpack/bin/webpack.js` will let Webpack do it's work
+

package.json

@@ -19,10 +19,14 @@
     "babel-loader": "^6.2.10",
     "babel-preset-es2015": "^6.18.0",
     "css-loader": "^0.26.1",
+    "expose-loader": "^0.7.3",
     "extract-text-webpack-plugin": "^1.0.1",
+    "file-loader": "^0.11.2",
     "html-webpack-plugin": "2.26.x",
+    "image-webpack-loader": "^3.4.2",
     "rimraf": "2.5.4",
     "style-loader": "^0.13.1",
+    "url-loader": "^0.5.9",
     "webpack": "1.14.0",
     "webpack-dev-server": "1.16.2"
   }

src/index.js

@@ -38,4 +38,10 @@ addImageToPage(multiplyImg);
 document.body.appendChild(multiplyResultsSpan);
 
 addImageToPage(sumImg);
-document.body.appendChild(sumResultSpan);
+document.body.appendChild(sumResultSpan);
+
+require("jquery");
+//import jQuery from 'jquery'; as it seems no import is needed?!
+$(document).ready(function() {
+  $('body').css("background-color", "red");
+});

webpack.config.js

@@ -1,4 +1,5 @@
 const path = require('path');
+const webpack = require('webpack');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 module.exports = {
@@ -23,15 +24,28 @@ module.exports = {
                 loader: ExtractTextPlugin.extract('css-loader')
             },
             {
-                test: /\.png$/,
-                loaders: [
-                    'url-loader?limit=5000',
-                    'image-webpack-loader'
-                ]
-            }
+                test: /\.(jpe?g|png|gif|svg)$/i,
+                loader: "file-loader?name=icons/[module]/[name].[ext]"
+// i. e. file?name=[path][name].[ext]&context=/the/root/path
+// This copies the file /the/root/path/dir/file.png to /output-directory/dir/file.png.
+
+                // loaders: [
+
+                //     'url-loader?limit=5000',
+                //     'image-webpack-loader'
+                // ]
+            },
+           { test: require.resolve('jquery'), loader: 'expose?jQuery!expose?$' }
         ]
     },
     plugins: [
         new ExtractTextPlugin('style.css')
+    //      new webpack.ProvidePlugin({
+    //   '$': 'jquery',
+    //   'jquery': 'jquery',
+    //   'jQuery': 'jquery',
+    //   'window.$': 'jquery',
+    //   'window.jQuery': 'jquery' // jQuery pluginy no ... ¯\_(ツ)_/¯
+    // }),
     ]
 };