Skip to content

Commit 2d5b002

Browse files
darrachequesnedarrachequesne
authored
[docs] Add webpack build example (#2828)
1 parent 5ae06e6 commit 2d5b002

File tree

11 files changed

+188
-0
lines changed

11 files changed

+188
-0
lines changed

‎examples/webpack-build-server/README.md

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
2+
# Socket.IO WebPack build
3+
4+
A sample Webpack build for the server.
5+
6+
## How to use
7+
8+
```
9+
$ npm i
10+
$ npm run build
11+
$ npm start
12+
```
13+
14+
**Note:**
15+
16+
- 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.
17+
18+
- the server is initiated with `serveClient` set to `false`, so it will not serve the client file.

‎examples/webpack-build-server/lib/index.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
2+
const server = require('http').createServer();
3+
const io = require('socket.io')(server, {
4+
// serveClient: false // do not serve the client file, in that case the brfs loader is not needed
5+
});
6+
const port = process.env.PORT || 3000;
7+
8+
io.on('connect', onConnect);
9+
server.listen(port, () => console.log('server listening on port ' + port));
10+
11+
function onConnect(socket){
12+
console.log('connect ' + socket.id);
13+
14+
socket.on('disconnect', () => console.log('disconnect ' + socket.id));
15+
}

‎examples/webpack-build-server/package.json

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "webpack-build-server",
3+
"version": "1.0.0",
4+
"description": "A sample Webpack build (for the server)",
5+
"scripts": {
6+
"start": "node dist/server.js",
7+
"build": "webpack --config ./support/webpack.config.js"
8+
},
9+
"author": "Damien Arrachequesne",
10+
"license": "MIT",
11+
"dependencies": {
12+
"brfs": "^1.4.3",
13+
"bufferutil": "^1.3.0",
14+
"socket.io": "^1.7.2",
15+
"transform-loader": "^0.2.3",
16+
"utf-8-validate": "^2.0.0"
17+
},
18+
"devDependencies": {
19+
"json-loader": "^0.5.4",
20+
"null-loader": "^0.1.1",
21+
"webpack": "^1.14.0"
22+
}
23+
}

‎examples/webpack-build-server/support/webpack.config.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
2+
module.exports = {
3+
entry: './lib/index.js',
4+
target: 'node',
5+
output: {
6+
path: './dist',
7+
filename: 'server.js'
8+
},
9+
module: {
10+
loaders: [
11+
{
12+
test: /(\.md|\.map)$/,
13+
loader: 'null'
14+
},
15+
{
16+
test: /\.json$/,
17+
loader: 'json'
18+
},
19+
{
20+
test: /\.js$/,
21+
loader: "transform-loader?brfs"
22+
}
23+
]
24+
}
25+
};

‎examples/webpack-build/README.md

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
2+
# Socket.IO WebPack build
3+
4+
A sample Webpack build for the browser.
5+
6+
## How to use
7+
8+
```
9+
$ npm i
10+
$ npm run build-all
11+
```
12+
13+
There are two WebPack configuration:
14+
15+
- the minimal configuration, just bundling the application and its dependencies. The `app.js` file in the `dist` folder is the result of that build.
16+
17+
- a slimmer one, where:
18+
- the JSON polyfill needed for IE6/IE7 support has been removed.
19+
- the `debug` calls and import have been removed (the [debug](https://github.com/visionmedia/debug) library is included in the build by default).
20+
- the source has been uglified (dropping IE8 support), and an associated SourceMap has been generated.

‎examples/webpack-build/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Socket.IO WebPack Example</title>
6+
</head>
7+
<body>
8+
9+
<!-- <script src="dist/app.js"></script> -->
10+
<script src="dist/app.slim.js"></script>
11+
12+
</body>
13+
</html>

‎examples/webpack-build/lib/index.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
2+
var socket = require('socket.io-client')('http://localhost:3000');
3+
4+
console.log('init');
5+
6+
socket.on('connect', onConnect);
7+
8+
function onConnect(){
9+
console.log('connect ' + socket.id);
10+
}

‎examples/webpack-build/package.json

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "webpack-build",
3+
"version": "1.0.0",
4+
"description": "A sample Webpack build",
5+
"scripts": {
6+
"build": "webpack --config ./support/webpack.config.js",
7+
"build-slim": "webpack --config ./support/webpack.config.slim.js",
8+
"build-all": "npm run build && npm run build-slim"
9+
},
10+
"author": "Damien Arrachequesne",
11+
"license": "MIT",
12+
"dependencies": {
13+
"socket.io-client": "^1.7.2"
14+
},
15+
"devDependencies": {
16+
"strip-loader": "^0.1.2",
17+
"webpack": "^1.14.0"
18+
}
19+
}

‎examples/webpack-build/support/noop.js

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
2+
module.exports = function () { return function () {}; };

‎examples/webpack-build/support/webpack.config.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
2+
module.exports = {
3+
entry: './lib/index.js',
4+
output: {
5+
path: './dist',
6+
filename: 'app.js'
7+
},
8+
};

‎examples/webpack-build/support/webpack.config.slim.js

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
2+
var webpack = require('webpack');
3+
4+
module.exports = {
5+
entry: './lib/index.js',
6+
output: {
7+
path: './dist',
8+
filename: 'app.slim.js'
9+
},
10+
externals: {
11+
// replace JSON polyfill (IE6/IE7) with global JSON object
12+
json3: 'JSON'
13+
},
14+
// generate sourcemap
15+
devtool: 'source-map',
16+
plugins: [
17+
// replace require('debug')() with an noop function
18+
new webpack.NormalModuleReplacementPlugin(/debug/, process.cwd() + '/support/noop.js'),
19+
// use uglifyJS (IE9+ support)
20+
new webpack.optimize.UglifyJsPlugin({
21+
compress: {
22+
warnings: false
23+
}
24+
})
25+
],
26+
module: {
27+
loaders: [
28+
{
29+
// strip `debug()` calls
30+
test: /\.js$/,
31+
loader: 'strip-loader?strip[]=debug'
32+
}
33+
]
34+
}
35+
};

0 commit comments

Comments
 (0)