webpack watch option during multi config

Question

I've created two configs for webpack.

When I'm exporting an array of configs: everything works, instead of watch option. The tasks simply finish (with success).

When I test one configuration exports - watch works fine.

I've tried multiple entry points, and watch worked also fine that time, but config looked a little messy.

I'll atach my configs, hope for advices, thanks.

/* FRONT-END CONFIG */
var frontWebpackConfig = {
  entry: "./src/front/app",

  output: {
    path: __dirname + "/build",
    filename: "public/app.js"
  },

  watch: NODE_ENV == "development",

  watchOptions : {
    aggregateTimeout: 100
  },

  devtool : NODE_ENV == "development" ? "cheap-inline-module-source-map" : null,

  plugins : [
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin({
      NODE_ENV : JSON.stringify(NODE_ENV)
    })
  ],

  module : {
    loaders : [
      {
        test : /\.js$/,
        loader : 'babel',
        query: {
          presets: ['es2015']
        }
      },
      { test: /\.css$/, loader: "style-loader!css-loader" }
    ]
  }
};


/* BACK-END CONFIG */
var backWebpackConfig = {
  entry: "./src/back/server",

  target : 'node',

  output: {
    path: __dirname + "/build",
    filename: "server.js"
  },

  externals: nodeModules,

  watch: NODE_ENV == "development",

  watchOptions : {
    aggregateTimeout: 100
  },

  devtool : NODE_ENV == "development" ? "cheap-inline-module-source-map" : null,

  plugins : [
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin({
      NODE_ENV : JSON.stringify(NODE_ENV)
    })
  ],

  module : {
    loaders : [
      {
        test : /\.js$/,
        loader : 'babel',
        query: {
          presets: ['es2015']
        }
      }
    ]
  }
}


/* EXPORTS */
module.exports = [frontWebpackConfig, backWebpackConfig]

Also, I've cheked this expressions: "NODE_ENV == "development" " value, and tried to set true directly.

Update: funny thing, I've just tried to launch with "--watch" option in command line and it worked fine. Any ideas why file config doesn't work?

Answer 1

watch isn't a configuration option in Webpack. As you've suggested you need to either pass it on the CLI or call watch instead of run when using the Node API:

compiler.watch({ ...watchOptions }, function(err, stats) {
    // ...
});

Answer 2

Actually, there is an option for watch in webpack 1.13.0+.

But it seems, that in case of several configurations (array of objects) watch property should be set to the array to make it work. Eventually watchOptions property of the first configuration object would be used.

/* FRONT-END CONFIG */
var frontWebpackConfig = {
    entry: "./src/front/app",
    // ...
    watch: NODE_ENV == "development",
    watchOptions : {
        aggregateTimeout: 100,
    },
};

/* BACK-END CONFIG */
var backWebpackConfig = {
    entry: "./src/back/server",
    // ...
};

var configuration = [frontWebpackConfig, backWebpackConfig];
configuration.watch = true;

/* EXPORTS */
module.exports = configuration;

--watch argument in the command line just sets watch property to the array during configuration loading and processing, that's why using CLI argument works as it's expected.