CODEWITHSUNDEEP
reactjswebpackjsx
yasar
yasar

Reputation: 2791

webpack --watch not working properly

i am using webpack as a build system for React.js files.i am using webpack --watch to create the bundle and wait for any changes and then rebuild again.but i have a situation like it creates the bundle and exit ,it doesn't wait for any changes.i dint know whats going wrong

enter image description here

My webpack.config.js

module.exports = {
    entry: [
       './Components/App.js'
    ],
    output:{
        path:__dirname,
        filename:'bundle.js'
    },
    module:{
        loaders:[{
            test: /\.jsx?$/,
            exclude:/node_modules/,
            loader:'babel',
            query:{
              presets: ['react']
            }
        }]
    }
};

package.json

{
  "name": "Sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies":{
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0",
    "babel-core": "^6.2.1",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18"
  }  
}

App.js

import React from 'react';
import ReactDOM from 'react-dom';

var HelloWorld = React.createClass({
    render:function(){
        return (
           <div>
             <h1> This is a heading </h1>
             <p> This is a Paragraph </p>
           </div>
        );
    }
});

ReactDOM.render(<HelloWorld />,document.getElementById('container'));

Upvotes: 1

Views: 8057

Answers (3)

Zbigniew Majewski
Zbigniew Majewski

Reputation: 11

Mac OSX user here. For me it didn't work because I imported some React module like this:

import Component from './a/component'

when I should have done this:

import Component from './a/Component'

The code worked and my app compiled but hot reloading for that file (Component.jsx) did not.

Upvotes: 1

May&#39;Habit
May&#39;Habit

Reputation: 1372

to watch, you may use this --progress --watch. See Troubleshooting in https://webpack.js.org/configuration/watch/#root

Upvotes: 1

fabio.sussetto
fabio.sussetto

Reputation: 7055

Have you checked this out? https://webpack.github.io/docs/troubleshooting.html#watching

Also, try to make the entrypoint file path absolute and not relative:

var path = require('path');
module.exports = {
    entry: [
       path.resolve('./Components/App.js')
    ]
    ...
}

I'm not sure if webpack is able to watch the entrypoint file if it's sepcified as a module as opposed to a filepath.

If that doesn't work, could you please post the entrypoint JS file? There can be issues related to the way you require/import files there (for example different casing), as webpack wouldn't be able to watch these.

Upvotes: 1

Related Questions