2

I'm running into an issue with webpack-dev-server and the react-hot loader. Occasionally a full page reload is required when the changes can't be hot loaded (e.g. when editing a non-react component). Since the dev server keeps all new changes in memory and doesn't write them to disk, doing a full reload loads the latest full build. Every time this happens I have to kill the dev server, do a full build, and then reload the page.

I'm wondering if I've got something misconfigured - is the dev server supposed to serve up the latest bundle from memory, even after a full reload? If not, does anyone have a creative workaround to this issue?

Here are my webpack bundle and server configs:

var webpack = {
  bundle: {
    resolve: {
      alias: vendor.scripts.src.paths
    },
    entry: {
      app: [
        'webpack-dev-server/client?http://localhost:3001',
        'webpack/hot/only-dev-server',
        app.scripts.src
      ],
      vendor: vendor.scripts.src.names
    },
    output: {
      path: buildDirs.js,
      filename: app.scripts.bundle
    },
    plugins: [
      new webpack.optimize.CommonsChunkPlugin('vendor', vendor.scripts.bundle),
      new webpack.optimize.DedupePlugin(),
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        react: 'React'
      }),
      new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en-gb/),
      new webpack.HotModuleReplacementPlugin()
    ],
    module: {
      loaders: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          include: srcRoot,
          loaders: ['react-hot', 'babel?stage=0']
        }
      ]
    },
    watch: true,
    devtool: 'cheap-module-source-map',
    progress: true
  },
  server: {
    contentBase: buildRoot,
    hot: true,
    historyApiFallback: true
  }
};
Vito
  • 96
  • 6

0 Answers0