1

I am working with a React project. Every time I make any change in any of the .js files, I have to run the "webpack" command in the terminal again to get the changes reflect on browser. Is there any way so that I cannot have to run the "webpack" command again n again.

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
    devServer: {
        inline: true,
        contentBase: './src',
        port: 3000
    },
    devtool: 'cheap-module-eval-source-map',
    entry: './dev/js/index.js',
    module: {
        loaders: [
            {
                test: /\.js$/,
                loaders: ['babel'],
                exclude: /node_modules/
            },
            {
                test: /\.scss/,
                loader: 'style-loader!css-loader!sass-loader'
            }
        ]
    },
    output: {
        path: 'src',
        filename: 'js/bundle.min.js'
    },
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin()
    ]
};
EdG
  • 2,243
  • 6
  • 48
  • 103

2 Answers2

1

You need webpack-dev-server and react hot loader, also you need development config. Please take a look at this page ReactHotLoader and if you find it complex comment here and i will provide you more links that could be helpful.

Also please take a look at this example Github:React-redux-app, this could help you set up your development env.

Žarko Selak
  • 1,073
  • 12
  • 19
  • I have installed react-hot-loader. Now what should I do. It's complex – EdG Sep 01 '16 at 11:11
  • I have posted the problem I am facing to this thread http://stackoverflow.com/questions/39278348/getting-started-with-react-hot-loader?noredirect=1#comment65891523_39278348 – EdG Sep 01 '16 at 18:50
1

It's simple. Just run webpack with -w flag to make it watch for changes and rebuild every time on change.

webpack -w
Ilya Lopukhin
  • 692
  • 8
  • 22