Webpack --watch doesn't reload on code changes

Question

I am building react API based application. Backend framework is PHP symfony and I used latest react with webpack. Problem that I have is that I can't get --watch option to reload when I make changes on code. Also don't know why but building app is also taking too long...

Does someone knows where is the problem ?

Here is my config file:

var path = require('path');
var webpack = require('webpack');
var devConfig = require('./webpack.config');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var config = {
    devtool: 'source-map',
    entry: {
        app: './app/index',
        vendor: devConfig.entry.vendor
    },
    resolve: {alias: {}},
    output: {
        path: path.join(__dirname, '/../../../../../../../public_html/pos-interface/'),
        filename: 'bundle.js',
        publicPath: './'
    },
    plugins: [
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('production')
            },
            "require.specified": "require.resolve"
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        new ExtractTextPlugin("styles.css"),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.ProvidePlugin({
            '$': "jquery",
            'jQuery': "jquery",
            'window.jQuery': "jquery",
            'window.$': 'jquery'

        }),
        new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js', Infinity),
    ],
    devServer: {
        historyApiFallback: true,
    },
    module: {
        noParse: [],
        loaders: [
            {
                test: /\.js$/,
                loaders: ['babel'],
                include: path.join(__dirname, 'app')
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader')

            },
            {
                test: /\.(png|jpg|gif)(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url-loader?limit=100000'
            },
            {
                test: /\.(eot|com|json|ttf|woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
            },
            {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
            }
        ]
    }
};


module.exports = config;

And here is command I am using to start webpack

./node_modules/.bin/webpack --config webpack.config.js --watch

maybe this will help https://stackoverflow.com/questions/44313375/webpack-watch-exits-after-building-once — Shubham Khatri, Sep 04 '17 at 11:35
can you try `-w` like `./node_modules/.bin/webpack --config webpack.config.js -w` — Nitish Phanse, Sep 04 '17 at 11:43
it does work with -w flag but recompiling takes 33 seconds. Do you maybe know how can I shorten it ? — jureispro, Sep 04 '17 at 11:47
Take a look at this document(https://webpack.js.org/guides/build-performance/) to find answer to your question. You will have to create two webpack config, for `dev` and `prod` sepeartely. and move all your `prod` related plugin(like, ExtractTextPlugin, UglifyJsPlugin ) to respective config. — Panther, Sep 04 '17 at 12:37
Something like this http://engineering.invisionapp.com/post/optimizing-webpack/ — Panther, Sep 04 '17 at 12:38

Webpack --watch doesn't reload on code changes

0 Answers0