exception thrown when writeToDisk is enabled in multi-compiler mode

[salemhilal]

• Operating System: CentOS 7.0.1406
• Node Version: v8.9.3
• NPM Version: v5.5.1
• webpack version: 4.3.0
• webpack-dev-middleware Version: 3.1.0

• This is a feature request
• This is a bug

Code

// our server.js code:

const express = require("express");
const webpack = require("webpack");
const webpackDevMiddleware = require("webpack-dev-middleware");

const webpackDevConfig = require("./webpack.dev.config.js");
const webpackCompiler = webpack(webpackDevConfig);
const app = express();

app.use(
    webpackDevMiddleware(webpackCompiler, {
    ┊   stats: false,
    ┊   loglevel: "trace",
    ┊   lazy: false,
    ┊   publicPath: webpackDevConfig.output.publicPath,

          // when this is false, there isn't any problem
    ┊   writeToDisk: true,
    })
);

app.listen(8506, () => console.log("Webpack server started on port 8506..."));

// Our webpack config is fairly large, but I'm not sure how useful it'll be here.
// I have the majority of our non-project-specific code below.
// there are a few configs that all share these options, with slightly different
// entrypoints.

const devOptions = {
    output: {
    ┊   path: path.join(ASSETS_ROOT, "dist", "js", "webpack"),
    ┊   publicPath: `https://our.dev.server/ac/webpack/js/`,
    ┊   filename: `${locale}/[name].js`,
    },
    mode: "development",
    devtool: "eval",
    cache: true,
    stats: false,
    watch: true,
    watchOptions: {
    ┊   ignored: ignoreList,
    },

    plugins: [
    ┊   new webpack.NoEmitOnErrorsPlugin(),
    ┊   new webpack.ProgressPlugin({ profile: false }),
    ],

    optimization: {
    ┊   removeAvailableModules: false,
    ┊   removeEmptyChunks: false,
    ┊   splitChunks: false,
    },
};

Expected Behavior

webpack-dev-middleware initializes without errors when writeToDisk is enabled

Actual Behavior

webpack-dev-middleware throws this exception when writeToDisk is set to true, but runs fine otherwise:

/home/shilal/development/builda-webpack/node_modules/webpack-dev-middleware/lib/fs.js:15
    context.compiler.hooks.afterEmit.tap('WebpackDevMiddleware', (compilation) => {
                                     ^

TypeError: Cannot read property 'tap' of undefined
    at toDisk (/path/to/project/node_modules/webpack-dev-middleware/lib/fs.js:15:38)
    at wdm (/path/to/project/node_modules/webpack-dev-middleware/index.js:65:5)
    at Object.<anonymous> (/path/to/project/server.js:12:5)
    at Module._compile (module.js:635:30)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
    at Function.Module.runMain (module.js:676:10)
    at startup (bootstrap_node.js:187:16)

This seems to be because the MultiCompiler that's created when an array of configs is used does not have an afterEmit hook to tap into.

Here's a screenshot of the hooks, and a console log of the compiler, just before the exception above is thrown.

For Bugs; How can we reproduce the behavior?

Turn on the writeToDisk flag and be sure to use an array of configs, rather than a single config.

[shellscape]

@salemhilal excellent issue, thank you 🍺

I'll get a fix for this out today.

[shellscape]

Unfortunately I've been slowed down a bit and haven't been able to circle back to this yet. Would happily review a PR to fix this in the meantime.

[JavoByte]

I tried to check on this issue but got stuck because the saved bundle has a syntax error. At some point a line like this appears:

__webpack_require____webpack_require__("./node_modules/core-js/shim.js""./node_modules/core-js/shim.js");

in the generated bundle. Building without this plugin works fine.

I'm not sure if this issue has something to do with this plugin.