From eb7bea1f8e1e2f96370be5954afdc237ee003abe Mon Sep 17 00:00:00 2001 From: Damien Arrachequesne Date: Tue, 17 Jan 2017 14:17:22 +0100 Subject: [PATCH 1/3] Add WebPack build example --- examples/webpack-build-server/README.md | 18 ++++++++++ examples/webpack-build-server/lib/index.js | 15 ++++++++ examples/webpack-build-server/package.json | 21 +++++++++++ .../support/webpack.config.js | 21 +++++++++++ examples/webpack-build/README.md | 20 +++++++++++ examples/webpack-build/index.html | 14 ++++++++ examples/webpack-build/lib/index.js | 10 ++++++ examples/webpack-build/package.json | 19 ++++++++++ examples/webpack-build/support/noop.js | 2 ++ .../webpack-build/support/webpack.config.js | 8 +++++ .../support/webpack.config.slim.js | 35 +++++++++++++++++++ 11 files changed, 183 insertions(+) create mode 100644 examples/webpack-build-server/README.md create mode 100644 examples/webpack-build-server/lib/index.js create mode 100644 examples/webpack-build-server/package.json create mode 100644 examples/webpack-build-server/support/webpack.config.js create mode 100644 examples/webpack-build/README.md create mode 100644 examples/webpack-build/index.html create mode 100644 examples/webpack-build/lib/index.js create mode 100644 examples/webpack-build/package.json create mode 100644 examples/webpack-build/support/noop.js create mode 100644 examples/webpack-build/support/webpack.config.js create mode 100644 examples/webpack-build/support/webpack.config.slim.js diff --git a/examples/webpack-build-server/README.md b/examples/webpack-build-server/README.md new file mode 100644 index 0000000000..b71d931193 --- /dev/null +++ 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 new file mode 100644 index 0000000000..70c803bb24 --- /dev/null +++ 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 +}); +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 new file mode 100644 index 0000000000..17d3bc32af --- /dev/null +++ b/examples/webpack-build-server/package.json @@ -0,0 +1,21 @@ +{ + "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": { + "bufferutil": "^1.3.0", + "socket.io": "^1.7.2", + "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 new file mode 100644 index 0000000000..bc3d7c968b --- /dev/null +++ b/examples/webpack-build-server/support/webpack.config.js @@ -0,0 +1,21 @@ + +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' + } + ] + } +}; diff --git a/examples/webpack-build/README.md b/examples/webpack-build/README.md new file mode 100644 index 0000000000..7df0835a9d --- /dev/null +++ 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 new file mode 100644 index 0000000000..637bc22887 --- /dev/null +++ b/examples/webpack-build/index.html @@ -0,0 +1,14 @@ + + + + + Socket.IO WebPack Example + + + + + + + + + \ No newline at end of file diff --git a/examples/webpack-build/lib/index.js b/examples/webpack-build/lib/index.js new file mode 100644 index 0000000000..82af605bf3 --- /dev/null +++ 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 new file mode 100644 index 0000000000..0c04d0b546 --- /dev/null +++ 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 new file mode 100644 index 0000000000..920c02ed2e --- /dev/null +++ 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 new file mode 100644 index 0000000000..8b5bd4b7cd --- /dev/null +++ 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 new file mode 100644 index 0000000000..cc2a38fc98 --- /dev/null +++ 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' + } + ] + } +}; From 81a675f16d37cf2b8d0a549190937ac460bccb63 Mon Sep 17 00:00:00 2001 From: Damien Arrachequesne Date: Tue, 17 Jan 2017 14:28:18 +0100 Subject: [PATCH 2/3] update path --- examples/webpack-build/index.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/examples/webpack-build/index.html b/examples/webpack-build/index.html index 637bc22887..77b3d69606 100644 --- a/examples/webpack-build/index.html +++ b/examples/webpack-build/index.html @@ -3,12 +3,11 @@ Socket.IO WebPack Example - - + \ No newline at end of file From bb3506532f4514a3ee12d03564680a5a5afb9ed4 Mon Sep 17 00:00:00 2001 From: Damien Arrachequesne Date: Fri, 20 Jan 2017 11:20:34 +0100 Subject: [PATCH 3/3] serve the client file --- examples/webpack-build-server/lib/index.js | 2 +- examples/webpack-build-server/package.json | 2 ++ examples/webpack-build-server/support/webpack.config.js | 4 ++++ 3 files changed, 7 insertions(+), 1 deletion(-) diff --git a/examples/webpack-build-server/lib/index.js b/examples/webpack-build-server/lib/index.js index 70c803bb24..afcdbdb8a4 100644 --- a/examples/webpack-build-server/lib/index.js +++ b/examples/webpack-build-server/lib/index.js @@ -1,7 +1,7 @@ const server = require('http').createServer(); const io = require('socket.io')(server, { - serveClient: false // do not serve the client file + // serveClient: false // do not serve the client file, in that case the brfs loader is not needed }); const port = process.env.PORT || 3000; diff --git a/examples/webpack-build-server/package.json b/examples/webpack-build-server/package.json index 17d3bc32af..28ef8ba392 100644 --- a/examples/webpack-build-server/package.json +++ b/examples/webpack-build-server/package.json @@ -9,8 +9,10 @@ "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": { diff --git a/examples/webpack-build-server/support/webpack.config.js b/examples/webpack-build-server/support/webpack.config.js index bc3d7c968b..a9893a73d2 100644 --- a/examples/webpack-build-server/support/webpack.config.js +++ b/examples/webpack-build-server/support/webpack.config.js @@ -15,6 +15,10 @@ module.exports = { { test: /\.json$/, loader: 'json' + }, + { + test: /\.js$/, + loader: "transform-loader?brfs" } ] }