Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

webpack watch option during multi config

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?

like image 953
Lazyexpert Avatar asked Oct 15 '25 21:10

Lazyexpert


2 Answers

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) {
    // ...
});
like image 65
riscarrott Avatar answered Oct 17 '25 10:10

riscarrott


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.

like image 44
valeroso Avatar answered Oct 17 '25 12:10

valeroso



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!