title: webpack 4 : bundle js not found
body: <p>I recently upgraded to webpack 4. The page is getting loaded successfully and whenever changes happened it refreshes the page automatically using webpack-dev-server. It does very nice but in the console it shows below error</p>
  
  <blockquote>
    <p>GET <a href="http://localhost:8090/build/bundle.js" rel="nofollow noreferrer">http://localhost:8090/build/bundle.js</a> 404 (Not Found)</p>
  </blockquote>
  
  <p>And some times when ever there is id in the URL it appends the id to bundle js url like below</p>
  
  <blockquote>
    <p><a href="http://localhost:8090/16/build/bundle.js" rel="nofollow noreferrer">http://localhost:8090/16/build/bundle.js</a></p>
  </blockquote>
  
  <p>I tried many ways with Stack Overflow answers and GitHub solutions but none of them working for me. Below are module details</p>
  
  <blockquote>
    <p>"webpack": "^4.15.0",
        "webpack-cli": "^3.0.8",
        "webpack-dev-server": "^3.1.4",
        "babel-core": "^6.26.3",
        "babel-loader": "^7.1.5",
        "babel-plugin-transform-class-properties": "^6.24.1",
        "babel-plugin-transform-object-rest-spread": "^6.26.0",
        "babel-polyfill": "^6.26.0",
        "babel-preset-env": "^1.7.0",
        "babel-preset-react": "^6.24.1"</p>
  </blockquote>
  
  <p><strong>webpack.config.js:</strong></p>
  
  <pre><code>const path = require("path");
  const HtmlWebpackPlugin = require("html-webpack-plugin");
  const CompressionPlugin = require("compression-webpack-plugin");
  const webpack = require('webpack');
  
  module.exports = {
      target: "web",
      entry: [
          "whatwg-fetch",
          'webpack-dev-server/client?http://localhost:8090',
          'webpack/hot/only-dev-server',
          'babel-polyfill',
          "./src/index.js"
          ],
      output: {
          path: path.resolve(__dirname, "build"),
          filename: "bundle.js",
          publicPath: "/"
          //make sure port 8090 is used when launching webpack-dev-server
      },
      plugins: [new HtmlWebpackPlugin({
          template: "index.html"
      }),
      new CompressionPlugin({
          asset: "[path].gz[query]",
          algorithm: "gzip",
          test: /\.js$|\.jsx$|\.css$|\.html$/,
          threshold: 10240,
          minRatio: 0.8
      }),
      new webpack.HotModuleReplacementPlugin(),
      // enable HMR globally
  
      new webpack.NoEmitOnErrorsPlugin(),
      new webpack.ProvidePlugin({   
          jQuery: 'jquery',
          $: 'jquery',
          jquery: 'jquery'
      })
      ],
      module: {
          rules: [
              {
                  //tell webpack to use jsx-loader for all *.jsx files
                  test: /\.(js|jsx)$/,
                  exclude: /node_modules/,
                  loader: "babel-loader"
              },
              {
                  test: /\.css$/,
                  loader: "style-loader!css-loader"
              },
              {
                  test: /\.(png|jpg|jpeg|gif|woff|woff2|svg)$/,
                  loader: 'url-loader?limit=100000'
              },
              {
                  test: /\.(eot|ttf)$/,
                  loader: "file-loader"  
              },
              {
                  test: /\.html$/,
                  exclude: /node_modules/,
                  loader: 'html-loader'
              },
              {
                  test: /\.scss$/,
                  loaders: ["style-loader", "css-loader", "sass-loader"]
              }
          ]
      },
      resolve: {
          modules: [
              path.resolve("./src"),
              path.resolve("./node_modules")
          ],
          extensions: [".js", ".jsx"]
      },
      devServer: {
          watchOptions: {
          // Needed for Windows Subsystem for Linux dev environment:
              poll: true
          },
          contentBase: "/build"
      },
      devtool: "cheap-module-eval-source-map",
      node: {
          child_process : "empty",
          fs: "empty"
      }
  };
  </code></pre>
  
  <p>My index.html is placed in root directory</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Cabin+Sketch" rel="stylesheet"&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="App"&gt;
          &lt;!-- this is where the root react component will get rendered --&gt;
      &lt;/div&gt;
      &lt;script type="text/javascript" src="./build/bundle.js"&gt;&lt;/script&gt;&lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>