github/socket.io
1
1
Fork 0
mirror of https://github.com/socketio/socket.io.git synced 2026-01-09 06:58:02 -05:00
Code Issues Packages Projects Releases Wiki Activity

docs(examples): update example with webpack

Browse Source
This commit is contained in:
Damien Arrachequesne
2022-04-22 23:09:24 +02:00
parent 6e1bb62982
commit 572133a58d
10 changed files with 30 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
examples/webpack-build/README.md
View File

@@ -7,14 +7,5 @@ A sample Webpack build for the browser.
```
$ npm i
$ npm run build-all
$ npm run build
```
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.

5
examples/webpack-build/index.html
View File

@@ -6,8 +6,7 @@
</head>
<body>
<!-- <script src="dist/app.js"></script> -->
<script src="dist/app.slim.js"></script>
<script src="dist/bundle.js"></script>
</body>
</html>
</html>

15
examples/webpack-build/index.js Normal file
View File

@@ -0,0 +1,15 @@
import { io } from "socket.io-client";
const socket = io("http://localhost:3000");
socket.on("connect", () => {
console.log(`connect ${socket.id}`);
});
socket.on("connect_error", (err) => {
console.log(`connect_error due to ${err.message}`);
});
socket.on("disconnect", (reason) => {
console.log(`disconnect due to ${reason}`);
});

12
examples/webpack-build/lib/index.js
View File

@@ -1,12 +0,0 @@
import io from 'socket.io-client';
const socket = io('http://localhost:3000');
console.log('init');
socket.on('connect', onConnect);
function onConnect(){
console.log('connect ' + socket.id);
}

15
examples/webpack-build/package.json
View File

@@ -2,20 +2,15 @@
"name": "webpack-build",
"version": "1.0.0",
"description": "A sample Webpack build",
"type": "module",
"scripts": {
"build": "webpack --config ./support/webpack.config.js",
"build-slim": "webpack --config ./support/webpack.config.slim.js",
"build-json-parser": "webpack --config ./support/webpack.config.json-parser.js",
"build-all": "npm run build && npm run build-slim && npm run build-json-parser"
"build": "webpack"
},
"author": "Damien Arrachequesne",
"license": "MIT",
"dependencies": {
"socket.io-client": "^2.0.2",
"socket.io-json-parser": "^2.1.0"
},
"devDependencies": {
"strip-loader": "^0.1.2",
"webpack": "^2.6.1"
"socket.io-client": "^4.4.1",
"webpack": "^5.72.0",
"webpack-cli": "^4.9.2"
}
}

2
examples/webpack-build/support/noop.js
View File

@@ -1,2 +0,0 @@
module.exports = function () { return function () {}; };

8
examples/webpack-build/support/webpack.config.js
View File

@@ -1,8 +0,0 @@
module.exports = {
entry: './lib/index.js',
output: {
path: require('path').join(__dirname, '../dist'),
filename: 'app.js'
}
};

33
examples/webpack-build/support/webpack.config.json-parser.js
View File

@@ -1,33 +0,0 @@
var webpack = require('webpack');
module.exports = {
entry: './lib/index.js',
output: {
path: require('path').join(__dirname, '../dist'),
filename: 'app.json-parser.js'
},
// generate sourcemap
devtool: 'source-map',
plugins: [
// replace require('debug')() with an noop function
new webpack.NormalModuleReplacementPlugin(/debug/, process.cwd() + '/support/noop.js'),
// replace socket.io-parser with socket.io-json-parser
new webpack.NormalModuleReplacementPlugin(/socket\.io-parser/, 'socket.io-json-parser'),
// use uglifyJS (IE9+ support)
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
],
module: {
loaders: [
{
// strip `debug()` calls
test: /\.js$/,
loader: 'strip-loader?strip[]=debug'
}
]
}
};

31
examples/webpack-build/support/webpack.config.slim.js
View File

@@ -1,31 +0,0 @@
var webpack = require('webpack');
module.exports = {
entry: './lib/index.js',
output: {
path: require('path').join(__dirname, '../dist'),
filename: 'app.slim.js'
},
// 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'
}
]
}
};

7
examples/webpack-build/webpack.config.js Normal file
View File

@@ -0,0 +1,7 @@
export default {
entry: "./index.js",
mode: "production",
output: {
filename: "bundle.js",
},
};