From d56ae7960208d9313592333f18d616a30eb7023a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petr=20Ml=C4=8Doch?= Date: Thu, 7 Sep 2017 15:57:02 +0200 Subject: [PATCH 1/7] improved readme and inserted missing packages in packages.json --- README.md | 9 +++++++++ package.json | 3 +++ 2 files changed, 12 insertions(+) diff --git a/README.md b/README.md index 4188f26..a2fd34e 100644 --- a/README.md +++ b/README.md @@ -1 +1,10 @@ # understanding_webpack + +## To make this example work +You have to have working `Node.js` (https://nodejs.org/en/). NPM is its package manager. + +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 + diff --git a/package.json b/package.json index 3d7495e..1e143b9 100644 --- a/package.json +++ b/package.json @@ -20,9 +20,12 @@ "babel-preset-es2015": "^6.18.0", "css-loader": "^0.26.1", "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" } From acd381cbfc9276ff3e5e9e9bea9f2a07fe8cda2e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petr=20Ml=C4=8Doch?= Date: Thu, 7 Sep 2017 16:04:20 +0200 Subject: [PATCH 2/7] better readme --- README.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index a2fd34e..b52a750 100644 --- a/README.md +++ b/README.md @@ -1,10 +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 have to have working `Node.js` (https://nodejs.org/en/). NPM is its package manager. +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. +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 From 00f1e8cfbc9956f848daa0e4bced4e188278e95b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petr=20Ml=C4=8Doch?= Date: Fri, 8 Sep 2017 13:04:18 +0200 Subject: [PATCH 3/7] playing with jQuery and moving images without processing --- webpack.config.js | 25 +++++++++++++++++++------ 1 file changed, 19 insertions(+), 6 deletions(-) diff --git a/webpack.config.js b/webpack.config.js index 5cee769..efd56fd 100644 --- a/webpack.config.js +++ b/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,27 @@ 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' + // ] } ] }, plugins: [ - new ExtractTextPlugin('style.css') + new ExtractTextPlugin('style.css'), + new webpack.ProvidePlugin({ + '$': 'jquery', + 'jquery': 'jquery', + 'jQuery': 'jquery', + 'window.$': 'jquery', + 'window.jQuery': 'jquery' // jQuery pluginy no ... ¯\_(ツ)_/¯ + }), ] }; From 173855cb5782ea5b3514f31e6f091de6974bbb0f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petr=20Ml=C4=8Doch?= Date: Fri, 8 Sep 2017 13:06:22 +0200 Subject: [PATCH 4/7] forgot index.js --- src/index.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 3d5fde6..fd9425d 100644 --- a/src/index.js +++ b/src/index.js @@ -38,4 +38,11 @@ addImageToPage(multiplyImg); document.body.appendChild(multiplyResultsSpan); addImageToPage(sumImg); -document.body.appendChild(sumResultSpan); \ No newline at end of file +document.body.appendChild(sumResultSpan); + +document.body.appendChild(document.createElement("p");); + +//import jQuery from 'jquery'; as it seems no import is needed?! +$(document).ready(function() { + $('body').css("background-color", "red"); +}); From 96139a16e014d42e8ec3971b2ae217aec95eec35 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petr=20Ml=C4=8Doch?= Date: Fri, 8 Sep 2017 15:26:37 +0200 Subject: [PATCH 5/7] fix in index.js --- src/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/index.js b/src/index.js index fd9425d..aee4393 100644 --- a/src/index.js +++ b/src/index.js @@ -40,7 +40,6 @@ document.body.appendChild(multiplyResultsSpan); addImageToPage(sumImg); document.body.appendChild(sumResultSpan); -document.body.appendChild(document.createElement("p");); //import jQuery from 'jquery'; as it seems no import is needed?! $(document).ready(function() { From ffd528a8d0b121269cc7086f855f79c23d1031e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petr=20Ml=C4=8Doch?= Date: Fri, 8 Sep 2017 15:30:46 +0200 Subject: [PATCH 6/7] jQuery is accesible in consolegit add -u! Yeeehaa! --- package.json | 1 + src/index.js | 2 +- webpack.config.js | 16 ++++++++-------- 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 1e143b9..a5d4ecb 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "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", diff --git a/src/index.js b/src/index.js index aee4393..a06e55f 100644 --- a/src/index.js +++ b/src/index.js @@ -40,7 +40,7 @@ document.body.appendChild(multiplyResultsSpan); addImageToPage(sumImg); document.body.appendChild(sumResultSpan); - +require("expose?$!jquery"); //import jQuery from 'jquery'; as it seems no import is needed?! $(document).ready(function() { $('body').css("background-color", "red"); diff --git a/webpack.config.js b/webpack.config.js index efd56fd..ce41484 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -38,13 +38,13 @@ module.exports = { ] }, plugins: [ - new ExtractTextPlugin('style.css'), - new webpack.ProvidePlugin({ - '$': 'jquery', - 'jquery': 'jquery', - 'jQuery': 'jquery', - 'window.$': 'jquery', - 'window.jQuery': 'jquery' // jQuery pluginy no ... ¯\_(ツ)_/¯ - }), + new ExtractTextPlugin('style.css') + // new webpack.ProvidePlugin({ + // '$': 'jquery', + // 'jquery': 'jquery', + // 'jQuery': 'jquery', + // 'window.$': 'jquery', + // 'window.jQuery': 'jquery' // jQuery pluginy no ... ¯\_(ツ)_/¯ + // }), ] }; From caa382aafe7fcca553c6d0bbf537dfde3cdb467e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petr=20Ml=C4=8Doch?= Date: Fri, 8 Sep 2017 15:33:17 +0200 Subject: [PATCH 7/7] and this works too! --- src/index.js | 2 +- webpack.config.js | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index a06e55f..6609318 100644 --- a/src/index.js +++ b/src/index.js @@ -40,7 +40,7 @@ document.body.appendChild(multiplyResultsSpan); addImageToPage(sumImg); document.body.appendChild(sumResultSpan); -require("expose?$!jquery"); +require("jquery"); //import jQuery from 'jquery'; as it seems no import is needed?! $(document).ready(function() { $('body').css("background-color", "red"); diff --git a/webpack.config.js b/webpack.config.js index ce41484..cb07aa5 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -34,7 +34,8 @@ module.exports = { // 'url-loader?limit=5000', // 'image-webpack-loader' // ] - } + }, + { test: require.resolve('jquery'), loader: 'expose?jQuery!expose?$' } ] }, plugins: [