Webpack not building the most recent changes

Question

I am working on a fairly simple project from https://medium.com/ethereum-developers/the-ultimate-end-to-end-tutorial-to-create-and-deploy-a-fully-descentralized-dapp-in-ethereum-18f0cf6d7e0e

Since the tutorial doesn't focus on the frontend part(webpack and babel and other things), I picked up these steps from different places.

Now I was trying to build the front using webpack and http-server, but I realized that it is not updating with the changes that I am making to the file.

webpack.config.js

const path = require('path')
module.exports = {
   entry: path.join(__dirname, 'src/js', 'index.js'), // Our frontend will be inside the src folder
   output: {
      path: path.join(__dirname, 'dist'),
      filename: 'build.js' // The final file will be created in dist/build.js
   },
   module: {
      rules: [{
         test: /\.css$/, // To load the css in react
         use: ['style-loader', 'css-loader'],
         include: /src/
      }, {
         test: /\.jsx?$/, // To load the js and jsx files
         loader: 'babel-loader',
         exclude: /node_modules/,
         query: {
            presets: ['@babel/preset-env', '@babel/preset-react']
         }
      }]
   }
}

package.json

{
  "name": "test-app",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/preset-env": "^7.10.2",
    "@babel/preset-react": "^7.10.1",
    "babel-loader": "^8.1.0",
    "css-loader": "^3.5.3",
    "json-loader": "^0.5.7",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "style-loader": "^1.2.1",
    "web3": "^0.20.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  },
  "directories": {
    "test": "test"
  },
  "dependencies": {},
  "description": ""
}

I build it using

 npx webpack --config webpack.config.js  

and then serve it

 http-server dist/

How do I fix this? And is this even the right way to do it? Thanks.

Answer 1

U have already webpack-cli installed in your dependencies so u dont have to add config in command:

First Add Webpack Script in your Package.json:

  "scripts": {
    "watch": "webpack --watch",
  },

When u run npm run watch --watch webpack will continue to watch for changes in any of the resolved files.

And for Server I recommend you webpack-dev-server

npm i webpack-dev-server

can be used to quickly develop an application

module.exports = {
  //...
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }
};

And add it to your npm script

 "scripts": {
        "watch": "webpack --watch",
        "start": "webpack-dev-server --hot --open",
      }

Now we can run npm start from the command line and we will see our browser automatically loading up our page. If you now change any of the source files and save them, the web server will automatically reload after the code has been compiled.

Advise: you must add html file in dist or plugins for webpack HtmlWebpackPlugin