Webpack在多个配置中使用watch选项

Question

我已经为webpack创建了两个配置文件。

当我导出一个配置数组时：除了watch选项之外，一切正常。任务会顺利完成（成功）。

当我测试单个配置导出时-watch工作良好。

我尝试过多个入口点，并且那时watch也工作得很好，但是配置看起来有点凌乱。

我将附上我的配置文件，希望能得到建议，谢谢。

/* 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]

另外，我已经检查了这个表达式："NODE_ENV == "development""的值，并尝试直接设置为true。

更新：有趣的是，我刚刚尝试在命令行中使用"--watch"选项启动，它可以正常工作。任何想法为什么配置文件不起作用？

- Lazyexpert

Answer 1

watch不是Webpack的配置选项。如您所提，您需要通过CLI传递它，或在使用Node API时调用watch而不是run：

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

- Richard Scarrott

Answer 2

实际上，在webpack 1.13.0+中，确实有一个关于watch选项的选项。

但是似乎在多个配置 (对象数组) 的情况下，必须将watch属性设置为数组才能让它起作用。最终，第一个配置对象的watchOptions属性将被使用。

/* 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 参数在命令行中只是在配置加载和处理过程中将 watch 属性设置为数组，这就是为什么使用 CLI 参数可以按预期工作的原因。

- valeroso