webpack-contrib · tiberiucorbu · Oct 10, 2017 · Oct 10, 2017 · michael-ciniawsky · Sep 12, 2018
diff --git a/.gitignore b/.gitignore
@@ -1 +1,3 @@
-node_modules
+node_modules
+example/dist
+example/node_modules
diff --git a/README.md b/README.md
@@ -21,6 +21,9 @@ npm install --save-dev script-loader
 
 Executes JS script once in global context.
 
+It converts the script into a plain string, and upon runtime, the exported string is passed to `window.eval` or `window.executeScript` depending on the browser.
+Doing so, the code loaded with this loader is ran on the topmost scope.
+
 > :warning: Doesn't work in NodeJS
 
 ### Config (recommended)
@@ -49,6 +52,10 @@ module.exports = {
 import exec from 'script-loader!./script.js';
 ```
 
+### Example
+
+Take a look at the example provided in the [./example](example) folder
+
 <h2 align="center">Maintainers</h2>
 
 <table>

diff --git a/example/README.md b/example/README.md
@@ -0,0 +1,37 @@
+# Script loader example
+
+This example demonstrates how to configure and how `script-loader` behaves.
+
+## Run
+
+To run install the `example` dependencies and run webpack with:
+
+``` cli
+npm i
+npm start
+```
+
+Than open a browser and point it to: http://localhost:8080/assets/
+
+You will notice an output from the two scripts now packed into `example/dist/index.js` bundle:
+
+```
+List of the script.exec.js fields :
+this fields :
+   	- this[postMessage] = function
+   	- this[blur] = function
+   	- this[focus] = function
+   	- this[close] = function
+    ....
+arguments fields :
+    Nothing to show here
+
+List of the entry.js fields :
+this fields :
+	Nothing to show here
+arguments fields :
+	arguments[[object Object]] = object
+	arguments[[object Object]] = object
+```
+
+Also note that code inside `script.exec.js` was executed without calling or using `exec` into the `entry.js`
diff --git a/example/assets/index.html b/example/assets/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Script loader example</title>
+</head>
+<body>
+    <script src="../dist/index.js"></script>
+</body>
+</html>
diff --git a/example/entry.js b/example/entry.js
@@ -0,0 +1,28 @@
+import exec from './script.exec.js';
+
+// List variables
+var buffer = 'List of the <code>entry.js</code> fields : \n';
+
+buffer += '<em>this</em> fields : \n';
+var hasFieldsInThis = false;
+for (var name in this) {
+    hasFieldsInThis = true;
+    buffer += '\t- this[' + name + '] = ' + typeof this[name] + '\n';
+}
+if (!hasFieldsInThis) {
+    buffer += '\t<em>Nothing to show here<\em>\n';
+}
+
+buffer += '<em>arguments</em> fields : \n';
+if (typeof arguments !== 'undefined') {
+    for (var x of arguments) {
+        buffer += '\targuments[' + x + '] = ' + typeof x + '\n';
+    }
+} else {
+    buffer += '\t<em>Nothing to show here<em>\n';
+}
+
+
+var pre =  document.createElement('pre');
+pre.innerHTML = buffer;
+document.body.appendChild(pre);
diff --git a/example/package.json b/example/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "script-loader-example",
+  "version": "0.0.1",
+  "author": "Tiberiu CORBU @tiberiucorbu",
+  "description": "Showcase the use of script-loader",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "start": "webpack && webpack-dev-server"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "script-loader": "../",
+    "webpack": "^3.1.0",
+    "webpack-dev-server": "^2.9.1"
+  },
+  "homepage": "http://github.com/webpack-contrib/extract-text-webpack-plugin",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/webpack-contrib/script-loader.git"
+  },
+  "pre-commit": "lint-staged",
+  "lint-staged": {
+    "*.js": [
+      "eslint --fix",
+      "git add"
+    ]
+  }
+}
diff --git a/example/script.exec.js b/example/script.exec.js
@@ -0,0 +1,25 @@
+var buffer = 'List of the <code>script.exec.js</code> fields : \n';
+
+buffer += '<em>this</em> fields : \n';
+var hasFieldsInThis = false;
+for (var name in this) {
+    hasFieldsInThis = true;
+    buffer += '\t- this[' + name + '] = ' + typeof this[name] + '\n';
+}
+if (!hasFieldsInThis) {
+    buffer += '\t<em>Nothing to show here<\em>\n';
+}
+
+buffer += '<em>arguments</em> fields : \n';
+if (typeof arguments !== 'undefined') {
+    for (var x of arguments) {
+        buffer += '\targuments[' + x + '] = ' + typeof x + '\n';
+    }
+} else {
+    buffer += '\t<em>Nothing to show here<em>\n';
+}
+
+
+var pre =  document.createElement('pre');
+pre.innerHTML = buffer;
+document.body.appendChild(pre);
diff --git a/example/webpack.config.js b/example/webpack.config.js
@@ -0,0 +1,16 @@
+module.exports = {
+    entry: {
+        index: "./entry.js",
+    },
+    output: {
+        filename: "[name].js?[hash]",
+        chunkFilename: "[name].js?[hash]-[chunkhash]",
+        path: __dirname + "/dist"
+    },
+    module: {
+        loaders: [
+            { test: /exec\.js$/, loader: "script-loader" }
+        ]
+    },
+    devtool: "source-map"
+};