Webpack dev-server doesn't update

Question

Good evning everyone,
I need your help because after 4 hours I don't know what to do next. I have a problem that I want webpack dev server to automatically update when I edits the index or app.js file.

The problem is that when I type npm start in terminal the browser starts.
When everything starts up trying edits the index file or app.js but nothing happens in browser, can't see my changes and in the terminal the file is not compiled. I need turn off webpack-dev-server by ctrl + c and start it back on, then I can see the changes. Please see below what I get from the terminal and my settings.

I'm using Windows with Ubuntu, zsh, Visual Studio Code.

I will only add that I tried the same on a Mac and it works without a problem.

Package.json

{
  "name": "webpack-helloworld",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "npx webpack-dev-server --open",
    "build": "npx webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.6.4",
    "@babel/preset-env": "^7.6.3",
    "@babel/preset-react": "^7.7.0",
    "babel-loader": "^8.0.6",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9",
    "webpack-dev-server": "^3.9.0"
  },
  "dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  }
}

webpack.config.js

const path = require('path');

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

module.exports = {
    entry: './src/app.js',
    
    output: {
        path: path.resolve(__dirname, 'build'),
        
        filename: 'app.min.js',
        
    },
    module: {
        rules: [
            {
                test: /\.js$/,

                exclude: /node_modules/,
                
                use: 'babel-loader',
                
                
            }
        ]
        
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            
            filename: 'index.html'
           
        })
    ]
}

My files

├── package.json
├── node_modules
├── package-lock.json
├── README.md
├── src
│   ├── index.html
│   ├── app.js
│── .browserslistrc
│── .babelrc
└── webpack.config.js

Terminal after I type npm start

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /mnt/e/Sites/react-helloworld
Browserslist: caniuse-lite is outdated. Please run next command `npm update`
ℹ ｢wdm｣: wait until bundle finished: /
ℹ ｢wdm｣: Hash: ee7a7b93215ba0b0a6a9
Version: webpack 4.41.2
Time: 6474ms
Built at: 03/19/2021 8:48:10 PM
     Asset       Size  Chunks             Chunk Names
app.min.js   1.43 MiB    main  [emitted]  main
index.html  374 bytes          [emitted]
Entrypoint main = app.min.js
[0] multi (webpack)-dev-server/client?http://localhost:8080 ./src/app.js 40 bytes {main} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/html-entities/index.js] 231 bytes {main} [built]
[./node_modules/react-dom/index.js] 1.33 KiB {main} [built]
[./node_modules/react/index.js] 190 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.89 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./src/app.js] 158 bytes {main} [built]
    + 29 hidden modules
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 523 bytes {0} [built]
    [./node_modules/lodash/lodash.js] 528 KiB {0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
ℹ ｢wdm｣: Compiled successfully.

Webpack dev-server doesn't update

0 Answers0