How to update bundle.js for static index.html page during webpack-dev-server run?

user_87796 0
Viewed 7522

I run this command:

webpack-dev-server --content-base deployment/deployment --hot --inline

This starts my website correctly. Then I updated randomFile.js with bad syntax (inserted "abc") that should cause a lint error or failure of some kind. When I save randomFile.js webpack reports "webpack: bundle is now valid" and shows the file I modified along with two other files (dunno why the other 2 are there). Webpack also reports emitting "bundle.js" and "guid.hot-update.json".

The site does not update.

I checked the timestamp on

deployment/deployment/js/bundle.js

and it has not updated.

webpack.config.js (also have .dev and .prod versions which seem to be ignored by webpack-dev-server)

var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  devtool: 'eval',
  entry: [
    'webpack-hot-middleware/client',
    './src/main.js'
  ],
  output: {
    path: path.join(__dirname, 'deployment/deployment/js'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [{
      test: /\.jpg/,
      loader: 'file'
    }, {
      test: /\.css$/,
      loaders: [
        'style?sourceMap',
        'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]}, {
      test: /\.scss$/,
      loaders: [
         'style?sourceMap',
         'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
         'resolve-url',
         'sass?sourceMap'
     ]
   },{
        loader:'babel-loader',
                exclude: path.resolve(__dirname, "node_modules"),
                test: /\.js/
    }]
  }
}

UPDATE

After learning webpack-dev-server does not update the original bundle.js I think I know where the problem comes from.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My Site</title>

  <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/bundle.css" /> 

  <input type="hidden" id="myUrlConfigValueInput" value="http://localhost/FibReactHello2/js/bundle.js">
  <input type="hidden" id="myAPIUrlConfigValueInput" value="http://localhost/mySite/api/">
</head>
<body>
  <div id="appEntrypt"></div>
    <script src="js/bundle.js"></script>
</body>
</html>

ReactJS has an entry pointe at appEntrypt. There is a dependency here on bundle.js. Because webpack-dev-server does not update this file (only the in memory file), my site never updates.

What can I do to fix this?

webpack
1 Answers
Related