Webpack site wont display when run through docker image - docker

Question

I am setting up a Javascript development environment for myself. I don't know much about it but I am using Webpack and Babel in the setup. After a lot of digging through I finally got Webpack compiling and running, where I could load a simple react page.
Now I created a Dockerfile to run my work on an image. Its very basic, load the files, expose the port and run the dev server. But when I try to access the site, I get a ERR_SOCKET_NOT_CONNECTED response. There is no errors from Webpack.
Dockerfile
FROM node:8-alpine
WORKDIR /
EXPOSE 3000
COPY . /frontend
WORKDIR /frontend
CMD [ "npm", "run", "dev" ]
Webpack.dev.js
const webpack = require('webpack');
const webpackDevServer = require('webpack-dev-server');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devtool: 'source-map',
entry: {
app: './src/index.js',
vendor: ['react', 'react-dom', 'react-router-dom', 'semantic- ui-react']
},
output: {
path: __dirname + '/src/dev',
filename: '[name].js'
},
devServer: {
port: 3000
},
resolve: {
alias: {
'../../theme.config$': path.join(__dirname, 'src/semantic-ui/theme.config')
}
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
use: {
loader: 'url-loader',
options: {
limit: 100000,
},
},
},
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
minChunks: Infinity
}),
new HtmlWebpackPlugin({
template: './src/index.html',
filename: path.resolve(__dirname, './src/dev/index.html'),
})
]
}
To be honest I am not sure what lot of this config file is about, as I copied it from a work colleague and made whatever tweaks were needed. But I once I got Webpack compiling and running I was happy and left it as is.
Here is the command I use to start the container docker container run --rm -p 3000:3000 frontend
There is no errors showing on the container from Webpack and I have exposed the ports correctly so I don't know why this isn't working or if its a docker issue or a webpack issue. Any help would be greatly appreciated