[docs] Add webpack build example (#2828)

socketio · Feb 22, 2017 · 2d5b002 · 2d5b002
1 parent 5ae06e6
commit 2d5b002
Show file tree

Hide file tree

Showing 11 changed files with 188 additions and 0 deletions.
diff --git a/examples/webpack-build-server/README.md b/examples/webpack-build-server/README.md
@@ -0,0 +1,18 @@
+
+# Socket.IO WebPack build
+
+A sample Webpack build for the server.
+
+## How to use
+
+```
+$ npm i
+$ npm run build
+$ npm start
+```
+
+**Note:**
+
+- the `bufferutil` and `utf-8-validate` are optional dependencies from `ws`, compiled from native code, which are meant to improve performance ([ref](https://github.com/websockets/ws#opt-in-for-performance)). You can also omit them, as they have their JS fallback, and ignore the WebPack warning.
+
+- the server is initiated with `serveClient` set to `false`, so it will not serve the client file.
diff --git a/examples/webpack-build-server/lib/index.js b/examples/webpack-build-server/lib/index.js
@@ -0,0 +1,15 @@
+
+const server = require('http').createServer();
+const io = require('socket.io')(server, {
+  // serveClient: false // do not serve the client file, in that case the brfs loader is not needed
+});
+const port = process.env.PORT || 3000;
+
+io.on('connect', onConnect);
+server.listen(port, () => console.log('server listening on port ' + port));
+
+function onConnect(socket){
+  console.log('connect ' + socket.id);
+
+  socket.on('disconnect', () => console.log('disconnect ' + socket.id));
+}
diff --git a/examples/webpack-build-server/package.json b/examples/webpack-build-server/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "webpack-build-server",
+  "version": "1.0.0",
+  "description": "A sample Webpack build (for the server)",
+  "scripts": {
+    "start": "node dist/server.js",
+    "build": "webpack --config ./support/webpack.config.js"
+  },
+  "author": "Damien Arrachequesne",
+  "license": "MIT",
+  "dependencies": {
+    "brfs": "^1.4.3",
+    "bufferutil": "^1.3.0",
+    "socket.io": "^1.7.2",
+    "transform-loader": "^0.2.3",
+    "utf-8-validate": "^2.0.0"
+  },
+  "devDependencies": {
+    "json-loader": "^0.5.4",
+    "null-loader": "^0.1.1",
+    "webpack": "^1.14.0"
+  }
+}
diff --git a/examples/webpack-build-server/support/webpack.config.js b/examples/webpack-build-server/support/webpack.config.js
@@ -0,0 +1,25 @@
+
+module.exports = {
+  entry: './lib/index.js',
+  target: 'node',
+  output: {
+    path: './dist',
+    filename: 'server.js'
+  },
+  module: {
+    loaders: [
+      {
+        test: /(\.md|\.map)$/,
+        loader: 'null'
+      },
+      {
+        test: /\.json$/,
+        loader: 'json'
+      },
+      {
+        test: /\.js$/,
+        loader: "transform-loader?brfs"
+      }
+    ]
+  }
+};
diff --git a/examples/webpack-build/README.md b/examples/webpack-build/README.md
@@ -0,0 +1,20 @@
+
+# Socket.IO WebPack build
+
+A sample Webpack build for the browser.
+
+## How to use
+
+```
+$ npm i
+$ npm run build-all
+```
+
+There are two WebPack configuration:
+
+- the minimal configuration, just bundling the application and its dependencies. The `app.js` file in the `dist` folder is the result of that build.
+
+- a slimmer one, where:
+  - the JSON polyfill needed for IE6/IE7 support has been removed.
+  - the `debug` calls and import have been removed (the [debug](https://github.com/visionmedia/debug) library is included in the build by default).
+  - the source has been uglified (dropping IE8 support), and an associated SourceMap has been generated.
diff --git a/examples/webpack-build/index.html b/examples/webpack-build/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Socket.IO WebPack Example</title>
+</head>
+<body>
+
+  <!-- <script src="dist/app.js"></script> -->
+  <script src="dist/app.slim.js"></script>
+
+</body>
+</html>
diff --git a/examples/webpack-build/lib/index.js b/examples/webpack-build/lib/index.js
@@ -0,0 +1,10 @@
+
+var socket = require('socket.io-client')('http://localhost:3000');
+
+console.log('init');
+
+socket.on('connect', onConnect);
+
+function onConnect(){
+  console.log('connect ' + socket.id);
+}
diff --git a/examples/webpack-build/package.json b/examples/webpack-build/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "webpack-build",
+  "version": "1.0.0",
+  "description": "A sample Webpack build",
+  "scripts": {
+    "build": "webpack --config ./support/webpack.config.js",
+    "build-slim": "webpack --config ./support/webpack.config.slim.js",
+    "build-all": "npm run build && npm run build-slim"
+  },
+  "author": "Damien Arrachequesne",
+  "license": "MIT",
+  "dependencies": {
+    "socket.io-client": "^1.7.2"
+  },
+  "devDependencies": {
+    "strip-loader": "^0.1.2",
+    "webpack": "^1.14.0"
+  }
+}
diff --git a/examples/webpack-build/support/noop.js b/examples/webpack-build/support/noop.js
@@ -0,0 +1,2 @@
+
+module.exports = function () { return function () {}; };
diff --git a/examples/webpack-build/support/webpack.config.js b/examples/webpack-build/support/webpack.config.js
@@ -0,0 +1,8 @@
+
+module.exports = {
+  entry: './lib/index.js',
+  output: {
+    path: './dist',
+    filename: 'app.js'
+  },
+};
diff --git a/examples/webpack-build/support/webpack.config.slim.js b/examples/webpack-build/support/webpack.config.slim.js
@@ -0,0 +1,35 @@
+
+var webpack = require('webpack');
+
+module.exports = {
+  entry: './lib/index.js',
+  output: {
+    path: './dist',
+    filename: 'app.slim.js'
+  },
+  externals: {
+    // replace JSON polyfill (IE6/IE7) with global JSON object
+    json3: 'JSON'
+  },
+  // generate sourcemap
+  devtool: 'source-map',
+  plugins: [
+    // replace require('debug')() with an noop function
+    new webpack.NormalModuleReplacementPlugin(/debug/, process.cwd() + '/support/noop.js'),
+    // use uglifyJS (IE9+ support)
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      }
+    })
+  ],
+  module: {
+    loaders: [
+      {
+        // strip `debug()` calls
+        test: /\.js$/,
+        loader: 'strip-loader?strip[]=debug'
+      }
+    ]
+  }
+};