I have a React.js application, that uses Webpack (I'm brand new to these technologies) as its bundler. I just added socket.io to my project. socket.io requires you include a js file in the index.html, <script src="/socket.io/socket.io.js"></script> . I was wondering if there was a way i could add socket.io file to my Webpack file so that i don't have to add the socket.io file to my index.html. Can Webpack do this, or is it mainly just used for loaders?
index.html
<!DOCTYPE html>
<html>
<head><title>Hello world</title></head>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
</script>
<body>
<div id="app"></div>
<script src="/bundle.js"></script>
</body>
</html>
webpack.config.js
import webpack from 'webpack';
import path from 'path';
export default {
debug: true,
devtool: 'inline-source-map',
noInfo: false,
entry: [
'eventsource-polyfill',
'webpack-hot-middleware/client?reload=true',
path.resolve(__dirname, 'src/index')
],
target: 'web',
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: path.resolve(__dirname, 'src') // source code
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [
{test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel']}, // use babel to transpile
{test: /(\.css)$/, loaders: ['style', 'css']},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
{test: /\.(woff|woff2)$/, loader: 'url?prefix=font/&limit=5000'},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
]
}
};
via John
No comments:
Post a Comment