Webpack watch not allowing to listen on open port?

Question

I've been following a guide to learn wepback and its bundling capabilities and wanted to find a way to automatically update the browser when a change was made to the code and found that --watch is one way to do so.

Without any watch in the webpack.config.json file or in the package.json file, the site is compiled correctly and says "Listening on port 8080"

When I add --watch to the package.json build script and watch/watchOptions to the webpack.config.json file I get the issue where it just hangs and doesn't print "Listening on port 8080"

Here is my code:

webpack.config.json

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

const outputDirectory = 'dist';

console.log(__dirname);
module.exports = {
  entry: {
    'bundle.js': [
      path.resolve(__dirname, 'src/client/index.js'),
    ]
  },
  output: {
    filename: '[name]',
    path: path.resolve(__dirname, 'dist'),
  },
  // entry: ['babel-polyfill', './src/client/index.js'],
  // output: {
  //   path: path.join(__dirname, outputDirectory),
  //   filename: 'bundle.js'
  // },

  module: {
    rules: [{
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/,
        loader: 'url-loader?limit=100000'
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },

  devServer: {
    port: 3000,
    open: true,
    inline: true,
    proxy: {
      '/api': 'http://localhost:8080'
    }
  },
  watch: true,
  watchOptions: {
    poll: true,
    ignored: /node_modules/
  },
  plugins: [
    new CleanWebpackPlugin([outputDirectory]),
    new HtmlWebpackPlugin({
      template: './public/index.html',
      favicon: './public/favicon.ico'
    })
  ]
};

package.json

{
  "name": "simple-react-full-stack",
  "version": "1.0.0",
  "description": "Boilerplate to build a full stack web application using React, Node.js, Express and Webpack.",
  "main": "src/server/index.js",
  "scripts": {
    "build": "webpack --mode production --watch --colors",
    "start": "npm run build && node src/server/index.js",
    "client": "webpack-dev-server --mode development --devtool inline-source-map --hot",
    "server": "nodemon src/server/index.js",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  },
  "author": "Sandeep Raveesh",
  "license": "ISC",
  "dependencies": {
    "babel-polyfill": "^6.26.0",
    "express": "^4.16.4",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/plugin-proposal-class-properties": "^7.4.0",
    "@babel/preset-env": "^7.4.3",
    "@babel/preset-react": "^7.0.0",
    "babel-eslint": "^10.0.0",
    "babel-loader": "^8.0.5",
    "clean-webpack-plugin": "^1.0.1",
    "concurrently": "^4.1.0",
    "css-loader": "^2.1.1",
    "eslint": "^5.0.0",
    "eslint-config-airbnb": "^17.0.0",
    "eslint-plugin-import": "^2.11.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.7.0",
    "file-loader": "^3.0.0",
    "html-webpack-plugin": "^3.2.0",
    "nodemon": "^1.17.3",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.1",
    "webpack-dev-server": "^3.1.3"
  }

Here is an image of what the command line shows me after doing npm start git command prompt

Help is greatly appreciated, this is the only thing I am stuck on and afterwards i am smooth sailing for Node.js and React.js :)

arvind grey · Answer 1 · 2019-04-26T06:04:27.700

0

"webpack-cli": "3.3.1",
"webpack-dev-server": "3.1.3"

try removing the cap symbol and give npm install

you need to run webpack-dev-server with the --hot flag:

webpack-dev-server --content-base ./ --port 9966 --hot

Then you can access the hot-loading version localhost:9966/webpack-dev-server/

You don't need to run watch as well.

update: This entry in your webpack config must change:

entry: ['./js/main.js'], --> entry: ['webpack/hot/dev-server' , './js/main.js']

Change your publicPath entry:

publicPath: '/assets/'

edited Apr 26 '19 at 06:04

answered Apr 26 '19 at 05:39

arvind grey

150
12

I just tried that out and I get the same thing, the wepback bundles all files, but doesnt open up port for listening... – Jasmin Adzic Apr 26 '19 at 05:43
what it's exactly saying?try previous version of webpack – arvind grey Apr 26 '19 at 05:57
Attached to the post is a link to an image of what the command line is saying – Jasmin Adzic Apr 26 '19 at 06:04
It seems to just hang, im really not sure – Jasmin Adzic Apr 26 '19 at 06:05
ok cool.kill the port and try again https://stackoverflow.com/questions/39632667/how-to-kill-the-process-currently-using-a-port-on-localhost-in-windows – arvind grey Apr 26 '19 at 06:17
Solution was to include a middleware since im using proxy in my webpack config. – Jasmin Adzic Apr 26 '19 at 07:00

score 0 · Answer 2 · answered Apr 26 '19 at 07:02

0

Use webpack-hot-middleware, links here: https://blog.cloudboost.io/live-reload-hot-module-replacement-with-webpack-middleware-d0a10a86fc80

and

https://www.npmjs.com/package/webpack-hot-middleware

answered Apr 26 '19 at 07:02

Jasmin Adzic

1
2

Webpack watch not allowing to listen on open port?

2 Answers2