I'm using webpack for my build which works without any problems using the webpack-dev-server (npm run watch), however when I try to create a production build (npm run build) I seem to get the error in the console when I try to load the website and nothing shows up at all on-screen.

Uncaught Error: [HMR] Hot Module Replacement is disabled.

I have a few questions about this:

1. My understanding of using Hot Module Replacement is that its designed for making life easier during development, it should not be used in production deployments. Is that correct?




2. Given the below, why is Hot Module Replacement is being used? I don't see what's driving it.




3. What's the best practice when it comes to production builds, should I have a separate webpack config for prod and dev? Ideally I'd like to make use of a single config purely to ease maintenance.

package.json

{

  // ...

  scripts: {

    build: webpack --progress --colors --production,

    watch: webpack-dev-server --inline --hot --progress --colors

  },

  dependencies: {

    bootstrap: ^3.3.6,

    bootstrap-sass: ^3.3.6,

    bootstrap-webpack: 0.0.5,

    extract-text-webpack-plugin: ^1.0.1,

    html-webpack-plugin: ^2.15.0,

    jquery: ^2.2.3,

    node-sass: ^3.4.2,

    react: ^15.0.1,

    react-bootstrap: ^0.28.5,

    react-dom: ^15.0.1,

    react-redux: ^4.4.1,

    react-router: ^2.0.1,

    react-router-redux: ^4.0.1,

    redux: ^3.3.1,

    redux-thunk: ^2.0.1,

    webpack: ^1.12.14

  },

  devDependencies: {

    babel-core: ^6.7.4,

    babel-loader: ^6.2.4,

    babel-preset-es2015: ^6.6.0,

    babel-preset-react: ^6.5.0,

    css-loader: ^0.23.1,

    exports-loader: ^0.6.3,

    file-loader: ^0.8.5,

    imports-loader: ^0.6.5,

    less: ^2.6.1,

    less-loader: ^2.2.3,

    redux-devtools: ^3.2.0,

    redux-logger: ^2.6.1,

    sass-loader: ^3.2.0,

    style-loader: ^0.13.1,

    url-loader: ^0.5.7,

    webpack-dev-server: ^1.14.1

  }

}

webpack.config.js

var webpack = require('webpack');

var htmlWebpackPlugin = require('html-webpack-plugin');

var path = require('path');



module.exports = {

    entry: [

        'webpack/hot/only-dev-server',

        path.resolve(__dirname, 'app/index.js')

    ],

    output: {

        path: path.resolve(__dirname, 'public'),

        filename: 'bundle.js'

    },

    module: {

        loaders: [

            { test: /.jsx?$/, exclude: /node_modules/, loader: 'babel', query: { presets: [ 'es2015', 'react' ] } },

            { test: /.scss$/, loader: 'style!css!sass?includePaths[]=' + path.resolve(__dirname, './node_modules/bootstrap-sass/assets/stylesheets/') },

            { test: /.(ttf|eot|svg|woff(2)?)(?[a-z0-9]+)?$/, loader: 'file' }

        ]

    },

    resolve: {

        modulesDirectories: ['node_modules']

    },

    plugins: [

        new webpack.NoErrorsPlugin(),

        new htmlWebpackPlugin({

            filename: 'index.html',

            template: './index.html',

            inject: false

        }),

        new webpack.ProvidePlugin({

            $: jquery,

            jQuery: jquery

        }),

        new webpack.optimize.OccurenceOrderPlugin()

    ]

};