reactjswebpackwebpack-hot-middlewarehot-module-replacementwebpack-dev-middleware

Webpack Hot Middleware not hot-reloading on Ubuntu with React?


I have run into a very frustrating problem where my webpack-hot-middleware is not 'hot reloading'. It is building the project, and rebuilding the project whenever I make any edits to any of my files in question but it seems to never show any changes and always displays my files prior to the edits made to them (almost like it is caching them or something).

I am using an Express server as well and am very new to all of this. I actually am trying to setup a development environment using files that were handed to me from an employer and am having a hard time trying to figure out how to solve this.

My package.json runs these scripts:

"scripts": {
"postinstall": "npm run prod",
"prod": "webpack --config ./webpack.prod.config.js",
"start": "node ./app_build.js"
 }

After an "npm install", it seems to run this file "webpack.prod.config.js":

const path = require('path');
const webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  devtool: 'source-map',

  entry: './main.js',

  output: {
    path: path.join(__dirname,'prod'),
    filename: 'bundle.js',
    publicPath: '/'
  },

  plugins:[
      new webpack.DefinePlugin({
          'process.env':{
              NODE_ENV: JSON.stringify('production'),
          }
      }),
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.UglifyJsPlugin({
        minimize: true,
        compress:{
          warnings:false
        }
      }),
      new ExtractTextPlugin('bundle.css'),
      new webpack.IgnorePlugin(/^(buffertools)$/) //Remove deeper dependancy for react-jsonschema-forms error
  ],

  module: {
    loaders: [
      { test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react'] }},
      { test: /\.css?$/,
        loader: ExtractTextPlugin.extract('style', 'css')},
      { test: /\.less$/,
        loader: 'style!css!less' },
      { test: /\.(png|jpg|gif)$/,
        loader: 'url-loader?limit=100000' },
        {
            test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
            loader: "url?limit=10000&mimetype=application/font-woff"
        }, {
            test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
            loader: "url?limit=10000&mimetype=application/font-woff"
        }, {
            test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
            loader: "url?limit=10000&mimetype=application/octet-stream"
        }, {
            test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
            loader: "file"
        }, {
            test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
            loader: "url?limit=10000&mimetype=image/svg+xml"
        }
    ]
  }
};

An "npm start" runs "app_build.js" which looks like this:

const Server = require('./server.js');
const port = (process.env.PORT || 3333);
const app = Server.app();
const stormpath = require('express-stormpath');
const path = require('path');
var helpers = require('express-stormpath/lib/helpers');
var uuid = require('node-uuid');
var requestProxy = require('express-request-proxy');
var btoa = require('btoa');
var session = require('express-session');
var request = require('request');
var bodyParser = require('body-parser');
var Mailgun = require('mailgun-js');
request = request.defaults({jar:true});

const CONSTANTS  = require('./src/constants/Constants');


//console.log('version: '+ process.env.NODE_ENV);

if (process.env.NODE_ENV !== 'production') {
    const webpack = require('webpack');
    const webpackDevMiddleware = require('webpack-dev-middleware');
    const webpackHotMiddleware = require('webpack-hot-middleware');
    const config = require('./webpack.dev.config.js');
    const compiler = webpack(config);

    app.use(webpackHotMiddleware(compiler));
    app.use(webpackDevMiddleware(compiler, {
        noInfo: true,
        publicPath: config.output.publicPath
    }))
    console.log(`Listening at http://localhost:${port}`);
}

There is more to this file but I believe my problem has something to do with my publicPath or something, I am not entirely sure. Like I said, I was handed this configuration from a previous developer and I am totally new to all of this.


Solution

  • I found out the problem came down to silly human-error: I sudo npm install'ed all my packages and I guess I just needed to do sudo npm start in order to allow webpack access to the files. Just a normal "npm start" would not let the hot-reloading function as intended.