Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add WebPack build example #2828

Merged
merged 3 commits into from
Feb 22, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions examples/webpack-build-server/README.md
Original file line number Diff line number Diff line change
@@ -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.
15 changes: 15 additions & 0 deletions examples/webpack-build-server/lib/index.js
Original file line number Diff line number Diff line change
@@ -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));
}
23 changes: 23 additions & 0 deletions examples/webpack-build-server/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
25 changes: 25 additions & 0 deletions examples/webpack-build-server/support/webpack.config.js
Original file line number Diff line number Diff line change
@@ -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"
}
]
}
};
20 changes: 20 additions & 0 deletions examples/webpack-build/README.md
Original file line number Diff line number Diff line change
@@ -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.
13 changes: 13 additions & 0 deletions examples/webpack-build/index.html
Original file line number Diff line number Diff line change
@@ -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>
10 changes: 10 additions & 0 deletions examples/webpack-build/lib/index.js
Original file line number Diff line number Diff line change
@@ -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);
}
19 changes: 19 additions & 0 deletions examples/webpack-build/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
2 changes: 2 additions & 0 deletions examples/webpack-build/support/noop.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@

module.exports = function () { return function () {}; };
8 changes: 8 additions & 0 deletions examples/webpack-build/support/webpack.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@

module.exports = {
entry: './lib/index.js',
output: {
path: './dist',
filename: 'app.js'
},
};
35 changes: 35 additions & 0 deletions examples/webpack-build/support/webpack.config.slim.js
Original file line number Diff line number Diff line change
@@ -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'
}
]
}
};