devMiddleware.fileSystem.readFileSync not work with gulp

[conchz]

Hi, @sokra , I'm getting started with webpack-dev-middleware and Gulp, but I have trouble with webpack-dev-middleware. In development mode, when I start the server by npm start, it's normal. However, I use Gulp task to start the server, an error happened:

Error: no such file or directory
   at MemoryFileSystem.readFileSync (d:\sources\modern-java-web-scaffold\frontend\node_modules\memory-fs\lib\MemoryFileSystem.js:114:10)
   at d:\sources\modern-java-web-scaffold\frontend\gulpfile.js:80:44
   at Layer.handle [as handle_request] (d:\sources\modern-java-web-scaffold\frontend\node_modules\express\lib\router\layer.js:95:5)
   at next (d:\sources\modern-java-web-scaffold\frontend\node_modules\express\lib\router\route.js:131:13)
   at Route.dispatch (d:\sources\modern-java-web-scaffold\frontend\node_modules\express\lib\router\route.js:112:3)
   at Layer.handle [as handle_request] (d:\sources\modern-java-web-scaffold\frontend\node_modules\express\lib\router\layer.js:95:5)
   at d:\sources\modern-java-web-scaffold\frontend\node_modules\express\lib\router\index.js:277:22
   at param (d:\sources\modern-java-web-scaffold\frontend\node_modules\express\lib\router\index.js:349:14)
   at param (d:\sources\modern-java-web-scaffold\frontend\node_modules\express\lib\router\index.js:365:14)
   at Function.process_params (d:\sources\modern-java-web-scaffold\frontend\node_modules\express\lib\router\index.js:410:3)
   at next (d:\sources\modern-java-web-scaffold\frontend\node_modules\express\lib\router\index.js:271:10)
   at favicon (d:\sources\modern-java-web-scaffold\frontend\node_modules\serve-favicon\index.js:72:7)
   at Layer.handle [as handle_request] (d:\sources\modern-java-web-scaffold\frontend\node_modules\express\lib\router\layer.js:95:5)
   at trim_prefix (d:\sources\modern-java-web-scaffold\frontend\node_modules\express\lib\router\index.js:312:13)
   at d:\sources\modern-java-web-scaffold\frontend\node_modules\express\lib\router\index.js:280:7
   at Function.process_params (d:\sources\modern-java-web-scaffold\frontend\node_modules\express\lib\router\index.js:330:12)

The main code in gulpfile.js as following:

gulp.task('dev-server', ['build-dev'], () => {
    const compiler = webpack(devConfig);
    const devMiddleware = webpackDevMiddleware(compiler, {
        publicPath: devConfig.output.publicPath,
        contentBase: 'src',
        stats: {
            colors: true,
            hash: false,
            timings: true,
            chunks: false,
            chunkModules: false,
            modules: false
        }
    });

    app.use(devMiddleware);
    app.use(webpackHotMiddleware(compiler));
    configFavicon(app);
    app.get('*', (req, res) => {
        res.write(devMiddleware.fileSystem.readFileSync(path.join(__dirname, 'dist/index.html')));
        res.end();
    });

    app.listen(port, '0.0.0.0', err => {
            if (err) throw new gutil.PluginError('dev-server', err);
            gutil.log('[dev-server]', '==> Listening on port ' + port + '. Open up http://0.0.0.0:' + port + '/ in your browser.');
    });
});

And this is my project's address: modern-java-web-scaffold. Is there something wrong with me? Could you give me some advice or solutions.
Thanks in advance.

[sokra]

You should not access devMiddleware.fileSystem. It's private. Instead rewrite requests.

[sunyang713]

hi, so just to be clear, is it still okay to manually serve a file from devMiddleware.fileSystem? For my project, this is pretty important - i.e. I need to modify the index.html request handler that devMiddleware automatically implements. How exactly can I "rewrite requests" for devMiddleware.fileSystem files?

[pwang2]

@sokra , I have a similar requirement for this.

I want to process some file in a custom webpack plugin using external library like node-sass. One reason is the webpack need a JS entry for stylesheet processing, it demands a extraction plugin thereafter. Kinda a little bit overhead to me.

Exposing the filesystem of the compiler will have a few benefit to server the output file directly just like it is emitted by webpack compile.

It sounds make sense to me. maybe I am wrong.

I got it working by accessing compilation.compiler.outputFileSystem; and then attach node-sass compile result to complition.assets

[SpaceK33z]

Closing this in favor of #88.